#######django与ajax########
一、什么是ajax：ajax英文翻译过来就是异步的JavaScript和xml，即用JavaScript语言与服务器进行异步交互，传输的数据为xml，但是传输
的数据也有其他形式，比如json格式数据。
二、它的优势是:1、异步
2、局部刷新
异步提交：浏览器(也就是客户端)向服务器提交一个后，无需要等服务端给你响应，你可以继续提交请求
同步提交：向服务器提交请求，必须要服务端给你响应之后，你才能继续提交请求。
三、基于query的ajax请求，写一个登陆案例(还是再django项目里啊)
html代码(伪代码)：
<body>
用户名：<input type="text" id="name"><br>
密码：<input type="password" id="pwd"><br>
<button id="btn">登陆</button>
</body>
<script>
$('#btn').click(function () {
$.ajax({
url:'/login/',
type:'post',
data:{
name:$('#name').val(),
pwd:$('#pwd').val(),
},
success:function (data) {
alert(data)
}
})
})
</script>
views代码：
def login(request):
if request.method == 'GET':
return render(request,'login.html')
name = request.POST.get('name')
pwd = request.POST.get('pwd')
if name == '朱宇' and pwd == '123':
return HttpResponse('登陆成功')
return HttpResponse('用户名密码错误')
路由关系：
url(r'^login/$', views.login),
##其实我们不用ajax也一样可以写出来，那么向后台提交数据有哪几种方式：
1、get请求的url也可以 127.0.0.1:8080/login?name=zhuyu&password=123
2、post请求通过form表单提交数据，因为没有指定编码格式，默认使用urlencoded,也就是这种name=zhuyu&password=123
3、就是通过ajax进行数据交互
四、基于ajax进行文件上传
首先写通过form表单进行文件上传吧
html代码：
<form action="" method="post" enctype="multipart/form-data">
文件：<input type="file" name="file"><br>
<input type="submit" value="提交" >
</form>
views代码：
def files(request):
if request.method == 'GET':
return render(request, 'files.html')
file = request.FILES.get('file')
file_name = file.name
download = r'D:\django练习\day78\download'
with open(download + '\\' + file_name , 'wb') as f:
for line in file:
f.write(line)
return HttpResponse('ok')
## 注意，我们上传文件必须指定编码为formdata，enctype="multipart/form-data"
## 那么我们基于ajax去上传文件，是不是也要指定特定的编码
html代码：
<body>
文件：<input type="file" id="file"><br>
<button id="btn" >提交</button>
</body>
<script>
$('#btn').click(function () {
var formdata = new FormData();
formdata.append('file',$('#file')[0].files[0]);
$.ajax({
url:'/files/',
type:'post',
processData:false,
contentType:false,
data:formdata,
success:function (data) {
alert(data)
}
})
})
</script>
views里代码和上面的一样。
## 这里我解释下JavaScript中的几行代码：
1、基于form表单上传文件，需要指定编码格式，那么ajax一样也是，首先我们先创建一个FormData的一个对象
2、我们通过append方法，给对象传值append(value1,value2),相当于value1=value2
3、processData:false, #告诉jQuery不要去处理发送的数据
contentType:false, #告诉jQuery不要去设置Content-Type请求头
4、processData的值只能是布尔值，因为这时的data的值，是一个对象，所以不需要进行处理了
五、ajax一般用在于json格式
我直接写script里面的代码
<script>
$('#btn').click(function () {
var info = {'user':$('#user').val(),
'pwd':$('#pwd').val()}
info = JSON.stringify(info) #将一个对象转成成json格式的字符串
$.ajax({
url:'', //url这里为空的话，默认向该页面发出ajax请求
type:'post', //type值为空的话，默认为get方法
contentType:'application/json', //以json格式传输
data:info,
success:function (data) {
console.log(data)
}
})
})
</script>
####上面就是前端发送json格式数据到后台
####那后台服务端也可以向前端发送json数据
def login(request):
if request.method == 'POST':
import json
info_dict = json.loads(str(request.body,encoding='utf-8'))
# request.body里是二进制格式
if info_dict.get('user') == '朱宇' and info_dict.get('pwd') == 123:
return JsonResponse({'status':1,'msg':'ok'})
return JsonResponse({'status':2,'msg':'用户名或密码错误'})
####后台传过来json格式的数据，所以success中data应该就是一个字符串，我们只有将他转换为对象(python中字典)
success:function (data) {
data = JSON.parse(data) // 这时data就是对象了，我们就可以取到它的属性了
}
# 那么有每一种方法，不让我自己出转换成对象呢？
dataType:'json' //这就是在ajax里设置的，它的功能就是上面那段代码
success:function (data) {
console.log(typeof data) //值为object
}
下面来总结下吧：
知识点不是很多，你从前台发过来的ajax请求，携带的数据你要知道是哪种类型。
1、文件的话，就先创建一个FormData对象,以key，value的位置，参传数进去
在ajax方法里，data对应的值就是这个FormData对象，所以在processData的值应该为false，
contentType的值也为false(让jquery不设置请求头)
注意：它文件在后面中request.FILES里面，如果有其他input框所对应的value，它的值在POST中取
2、没有上传文件，就是form表单的里input的话，就直接传了，contentType默认为urlencoded编码方法
3、json格式数据，首先是把对象给造出来，并且把数据放里面，然后转换成json格式字符串，
这里contentType必须为'application/json'，这样它的的数据在request.body里，是二进制格式
4、还有就是，你在前端接收到后台json格式数据，可以在ajax那里写dataType:'json'，它会自动转换成对象
