轉載自：https://my.oschina.net/esdn/blog/814111
步驟1:后台數據通過 JSON 序列化成字符串
注意：1、json是1個字符串
2、通過json.dumps('xxx') 序列化成 1個字符串的 '字典對象'
views.py
def ajax(request): if request.method=='POST': print(request.POST) data={'status':0,'msg':'請求成功','data':[11,22,33,44]} return HttpResponse(json.dumps(data)) else: return render(request,'ajax.html')此時tempates 中ajax.html 代碼 詳細查看：https://my.oschina.net/esdn/blog/814094
此時瀏覽器返回的數據
步驟2：前台取出后台序列化的字符串
方法1：正則表達式 （不推薦）
方法2：jQuery.parseJSON() ，需要import json
轉換成1個JQuery可識別的字典（對象） 通過 對象. xxx 取值 （推薦）
views.py序列化：return HttpResponse(json.dumps(data))
ajax.html 取值：var obj=jQuery.parseJSON(arg)
console.log(obj.status)
修改后的tempates 中ajax.html 代碼
<script type='text/javascript'> function DoAjax(){ var temp=$('#na').val() $.ajax({ url:'/ajax/', //url相當於 form 中的 action type:'POST', //type相當於form 中的 method data:{dat:temp}, // data：傳人的數據 dat為任意設置的內容，相當於模版中的{author:lee} success:function(arg){ //成功執行 console.log() 函數 arg 為HttpResponse 返回的值 var obj=jQuery.parseJSON(arg) //轉化成JS識別的對象 console.log(obj) //打印obj console.log(arg) //json.dumps(data) 序列化后的數據 console.log(obj.status) //取json.dumps(data)字典的值status console.log(obj.msg) console.log(obj.data) console.log('request.POST 提交成功') }, error:function(){ //失敗 console.log('失敗') } }); } </script>此時前台瀏覽器 顯示數據
方法3：content_type='application/json'
views.py序列化：return HttpResponse(json.dumps(data),content_type='application/json')
瀏覽器F12有變色提示
或：HttpResponse(json.dumps(data),content_type='type/json') 瀏覽器F12無變色提示
ajax.html 取值 arg.xxx
方法4：使用JsonRespon 包 （最簡單） 前台通過 arg.xxx 取值
views.py 序列化： return JsonResponse(data)
ajax.html 取值：arg.xxx
區別：HttpResponse 需要dumps
JsonResponse 不需要dumps
views.py
from django.shortcuts import render from django.http import JsonResponse def ajax(request): if request.method=='POST': print(request.POST) data={'status':0,'msg':'請求成功','data':[11,22,33,44]} #假如傳人的數據為一字典 #return HttpResponse(json.dumps(data)) #原來寫法，需要dumps return JsonResponse(data) #后來寫法 else: return render(request,'ajax.html')templates 中的 ajax.html
<script type='text/javascript'> function DoAjax(){ var temp=$('#na').val() $.ajax({ url:'/ajax/', //url相當於 form 中的 action type:'POST', //type相當於form 中的 method data:{dat:temp}, // data：傳人的數據 dat為任意設置的內容，相當於模版中的{author:lee} success:function(arg){ //成功執行 console.log() 函數 arg 為HttpResponse 返回的值 //var obj=jQuery.parseJSON(arg) //console.log(arg) //json.dumps(data) 序列化后的數據 console.log(arg.msg) /* console.log(obj) console.log(obj.status) //取json.dumps(data)字典的值status console.log(obj.msg) console.log(obj.data)*/ console.log('request.POST 提交成功') }, error:function(){ //失敗 console.log('失敗') } }); } </script>