Django 前台通过json 取出后台数据
2016-12-29 00:00
267 查看
前台通过json 取出后台数据
步骤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>
相关文章推荐
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
- struts2-通过action从后台将json数据传到前台的方法(二)
- 后台向前台输送json格式的数据,前台通过ajax接受
- 前台获取后台的数据,通过JSON后去后台的对象的数组
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
- struts2-通过action从后台将json数据传到前台的方法(一)
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
- 使用jQuery解析JSON数据(jquery在前台对从后台获取到的json数据进行解析,并进行显示)
- asp.net MVC后台获取前台json数据怎么处理
- 关于ExtJs前台Form获取后台的JSON数据
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- EXT 中json格式数据后台与前台的交互
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
- Jquery通过GetJSON的后台调用Json取Json数据的示例!
- java 后台返回json数据给前台
- 通过json数据进行前后台验证