Django 前台通过json 取出后台数据
转载自: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>
转载于:https://www.cnblogs.com/xibuhaohao/p/10512446.html
Django 前台通过json 取出后台数据相关推荐
- django 返回ajax html,Django 前台通过json 取出后台数据
前台通过json 取出后台数据 步骤1:后台数据通过 JSON 序列化成字符串 注意:1.json是1个字符串 2.通过json.dumps('xxx') 序列化成 1个字符串的 '字典对象' vie ...
- 前台传JSON到后台
现在,有一个需求,我需要将表格中选中行的数据中的一部分传直接传到控制器中,然后保存到另外一张表中.一开始,我就想到在前台使用ajax构造json数据,然后控制器直接通过list接收. 选中界面中的行, ...
- 如何在Django中接收JSON格式的数据
Django做了大量工作简化我们的Web开发工作, 这其中当然也包括接收来自客户端的数据这一普遍需求. 大部分时候,从客户端传入的数据主要是FORM的POST数据,和来自URL的GET数据, 在Dja ...
- ajax前台传json到后台解析的方法以及注意事项
首先,如果是maven工程的话,需要在pom.xml文件中添加下方依赖<dependency><groupId>net.sf.json-lib</groupId>& ...
- 零基础学小程序006(后台数据的获取与解析)----请求服务器json数据展现到小程序上
视频讲解地址:https://edu.csdn.net/course/play/9531/265552 小程序云开发讲解视频:https://edu.csdn.net/course/detail/96 ...
- vue绑定后台数据ajax,vueJS 获取后台数据 绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
- 处理登录问题遇到的后台数据未定义问题
在处理登录问题 引入后台书注册的数据 ajax以及后台验证都没有问题的情况下 ,但是登录页面显示 userinfo没有定义的原因(即后台定义的数据前台 不显示或者前台拿不到后台的数据) 原因如下: 在 ...
- 前台传递JSON数据,后台spring mvc如何接收数据
如何传递JSON数据到后台? 方式一, 使用post请求,请求类型为:application/x-www-form-urlencoded; charset=UTF-8 $.ajax({url : ur ...
- 前台传json ajax,如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
首先,我们要在前台引入json的脚本,以便于把js对象序列化 然后我们在前台声明一个类,将你要保存的值放到类里面,最后序列化 function Save() { var examId = ''; va ...
最新文章
- PLSQL创建Oracle定时任务
- android xml转换成svg,如何将Android xml布局转换为png / svg以在iOS版本中使用
- 特殊字符、Date、JS应用
- 博科VP:闪存推动了与之相匹配的第六代FC的发展
- [原创软件测试工作技能
- wxWidgets:wxCheckListBox类用法
- VTK:Points之UnsignedDistance
- 关于Tomcat文件下载中文名乱码现象
- Uva(10158)
- 腾讯云与同方全球人寿签署战略合作 “云+保险”合作伙伴队伍再壮大
- linux centos目录结构(一)
- Python基础语法题库
- jquery第三章练习三(制作京东常见问题分类页面)
- 耳挂式蓝牙耳机原理_一种耳挂式蓝牙耳机的制作方法
- java类为什么要序列化_Java 中的类为什么要实现序列化呢
- 让你的系统无懈可击 史上优秀防火墙一览
- cityengine常用规则函数
- html使用手机修改密码,moshujiacn手机设置修改密码步骤
- Python三方库:RabbitMQ基本使用
- Tekton之二:如何使用 Tekton 创建 CICD 流水线