Django之AJAX传输JSON数据

　　AJAX中JSON数据传输：

AJAX请求JSON类型数据：

· AJAX通过GET或者POST方式都可以发送JSON数据请求，需要指定内容类型：‘Content-Type\':\'application/json\'，post请求必须设置

headers:{\'X-CSRFToken\': $(\'input[name=csrfmiddlewaretoken]\').val()}，在请求头部进行csrf认证；

· 请求数据data经过JSON.stringify()进行序列化

· AJAX在前端发送的JSON数据，django不能自动解析，因此request.GET或request.POST都为空，JSON数据在请求体request.body中需要手动解析(解码反序列化)。

django响应JSON类型数据：

django视图函数通过importjson导入模块，对数据需要返回的数据进行json.dumps()序列化

AJAX请求JSON类型数据：

以post请求为例，get请求不需要csrf认证，故不需要JSON数据请求的headers信息

　　login.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 6     <title>login</title>
 7 </head>
 8 <body>
 9 <div>
10     用户名：<input type="text" name="username" id="username">
11     密码：<input type="password" name="password" id="password">
12     <input type="button" id="submit" value="提交">{% csrf_token %}
13     <span id="status"></span>
14 </div>
15 </body>
16  
17 <script>
18     //以post方式请求
19     $(function () {
20         $(\'#submit\').click(function () {
21  
22             $.ajax({
23                 url: "{% url \'auth\' %}",//请求路径
24                 type: \'post\',            //请求方式
25  
26                 //(1)默认数据请求
27                 //data: { //请求数据(post请求的csrf认证键值对固定)
28                   //  username: $(\'#username\').val(),
29                     //password: $(\'#password\').val(),
30                     //csrfmiddlewaretoken: $(\'input[name=csrfmiddlewaretoken]\').val(),
31                 //},
32  
33                 //(2)JSON数据请求
34                 \'Content-Type\':\'application/json\',
35                 headers:{\'X-CSRFToken\': $(\'input[name=csrfmiddlewaretoken]\').val()},//在请求头通过csrf认证，键固定
36                 data:JSON.stringify({
37                     username: $(\'#username\').val(),
38                     password: $(\'#password\').val(),
39                 }),
40  
41  
42                 success: function (response) {//请求回调函数
43                     if (response == 1) {
44                         location.href = "{% url \'index\' %}"
45                     } else {
46                         $(\'#status\').text(\'账号或密码有误！\')
47                     }
48                 }
49             })
50         })
51     });
52  
53 </script>
54 </html>

　　urls.py

1 urlpatterns = [
2     url(r\'^admin/\', admin.site.urls),
3     url(r\'^login/\',views.login,name=\'login\'),
4     url(r\'^auth/\',views.auth,name=\'auth\'),
5     url(r\'^index/\',views.index,name=\'index\'),
6 ]

urls.py

　　views.py

 1 def auth(request):
 2     if request.method == \'POST\':
 3         #（1）默认数据请求
 4         # name = request.POST.get(\'username\')
 5         # psd = request.POST.get(\'password\')
 6  
 7         #（2）JSON数据请求
 8         request_data=request.body
 9         print(request_data)
10         request_dict=json.loads(request_data.decode(\'utf-8\'))
11         name=request_dict.get(\'username\')
12         psd=request_dict.get(\'password\')
13  
14  
15         if name == "yang" and psd == \'123\':
16             status = 1
17         else:
18             status = 0
19         return HttpResponse(status)

views.py

django响应JSON类型数据：

AJAX中回调函数接收到的数据都为string字符串类型，因此在视图函数响应的原始数据只有字符串类型的才能被AJAX正常接收，其它的数据类型(数字，列表，字典等)都必须通过json数据类型进行传输

（1）视图函数响应字符串，AJAX正常接收，其否则响应的其它数据类型也都是string无法解析使用：

（2）视图函数响应JSON数据类型：

· 使用HttpResponse响应手动序列化后JSON数据直接响应，前端得到的响应数据需要被动反序列化成对应的数据类型

· 使用HttpResponse响应手动序列化后JSON数据并设置参数content_type=\'application/json\'前端得到的响应数据是经过JSON对象自动进行反序列化后的对应数据类型

· 使用HttpResponse响应不需要手动序列化JSON数据，直接响应即可，但是对于非字典类型的数据类型需要设置参数safe=False，前端得到的响应数据是经过JSON对象自动进行反序列化后的对应数据类型

①使用HttpResponse响应：未告知类型，前端需要被动解析

视图函数：

data={\'status\':[1,2,3],\'info\':\'login\'}

return HttpResponse(json.dumps(data))#直接发送json字典，前端需要被动反序列化

AJAX回调函数：

success: function (response) {//请求回调函数参数response被动反序列化

console.log(JSON.parse(response));

console.log(typeof JSON.parse(response));

②使用HttpResponse响应，告知类型，前段自动调用JSON对象解析

视图函数：

data={\'status\':[1,2,3],\'info\':\'login\'}

return HttpResponse(json.dumps(data),content_type=\'application/json\')#发送json字典，告知类型

return HttpResponse(json.dumps(ret,ensure_ascii=False)) #ensure_ascii=False是告诉json不要对中文进行编码，不然返回给前端的数据中如果有中文的话会被编码成unicode类型的数据，导致前端看不到中文

AJAX回调函数：

success: function (response) {//请求回调函数参数response自动反序列化

console.log(response);

console.log(typeof response);

③使用JsonResponse响应，不需要手动进行序列化，同时也不需要告知类型，在响应除字典以外的数据类型时，需要添加参数safe=False

from django.http import JsonResponse

响应字典视图函数：

data={\'status\':[1,2,3],\'info\':\'login\'}

return JsonResponse(data)#使用JsonResponse,直接响应数据

响应非字典视图函数：

data=[{\'status\':[1,2,3],\'info\':\'login\'}]

return JsonResponse(data,safe=False)#使用JsonResponse,直接相应数据,字典以外数据类型徐设置参数safe=False

AJAX回调函数：

success: function (response) {//请求回调函数参数response自动反序列化

console.log(response);

console.log(typeof response);