Django之AJAX传输JSON数据
Posted open-yang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 ]
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)
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数据的主要内容，如果未能解决你的问题，请参考以下文章