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);