Django之AJAX传输JSON数据

Posted open-yang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django之AJAX传输JSON数据相关的知识,希望对你有一定的参考价值。

  AJAXJSON数据传输:

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.GETrequest.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>
login.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);

以上是关于Django之AJAX传输JSON数据的主要内容,如果未能解决你的问题,请参考以下文章

Django之ajax的数据传输和分页器

Django之ajax的数据传输和分页器

Django之组件

Django之ajax

Django之Ajax

django之ajax组件