Django 前臺經過json 取出後臺數據

前臺經過json 取出後臺數據

步驟1:後臺數據經過 JSON 序列化成字符串

注意：一、json是1個字符串

          二、經過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>