Django 前端通过json 取出后端数据

前端通过json 取出后端数据

步骤1:后台数据通过 JSON 序列化成字符串a

注意: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>

Django 前端通过json 取出后端数据的更多相关文章

  1. Django 前台通过json 取出后台数据

    转载自:https://my.oschina.net/esdn/blog/814111 步骤1:后台数据通过 JSON 序列化成字符串 注意:1.json是1个字符串 2.通过json.dumps(' ...

  2. [django]主次表如何取出对方数据[主表obj.子表__set()]

    [sql]mysql管理手头手册,多对多sql逻辑 国家--城市例子 class Country(models.Model): name = models.CharField(max_length=3 ...

  3. django中使用json.dumps处理数据时,在前台遇到字符转义的问题

    django后台代码: import json ctx['dormitory_list'] = json.dumps([{", "is_checked": 1}, {&q ...

  4. ajax前后端数据交互简析

    前端-------->后端 方法:POST 将要传递给后台的数据在前端拼接成url字符串,通过request.send()传递给后台,后台php把得到的数据以索引数组的方式存储在$_POST中. ...

  5. Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)

    关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...

  6. Python Django 前后端数据交互 之 后端向前端发送数据

    Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...

  7. JSON(四)——异步请求中前后端使用Json格式的数据进行交互

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. 一,json格式字符串 <input type="button" id=&quo ...

  8. Charles——前端必备模拟后端数据

    Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...

  9. 后端返回值以json的格式返回,前端以json格式接收

    以随便一个类为例子:这个例子是查询企业主营类别前5事项 一.以json数组的格式返回到前端中 (1)后端将结果绑定到param中,然后将结果以为json数组的格式返回到前端 /** * 查询企业主营类 ...

随机推荐

  1. ajax报告申请添加

    function reportApplyAddFun(){ $("#dlg").dialog("open").dialog("center" ...

  2. 53道java多线程面试题整理及答案(2018年)

    最近看到网上流传着,各种面试经验及面试题,往往都是一大堆技术题目贴上去,而没有答案. 为此我业余时间整理了Java多线程相关的53道常见面试题,及详细答案,你可以用它来好好准备面试.望各路大牛,发现不 ...

  3. linux如何查看所有的用户和组信息(转载)

    [步骤一]cat /etc/passwdcat /etc/passwd查看所有的用户信息,详情如下图 [步骤二]cat /etc/passwd|grep 用户名 cat /etc/passwd|gre ...

  4. MongoDB数据库的基本操作命令

    启动服务 net start mongodb 使用 登录本机mongodb Mongodb服务启动之后,打开命令行工具. 登录 mongo 127.0.0.1:27017 27017是mongodb的 ...

  5. 源码编译apache报错的解决方法

    源码编译apache报错的解决方法   问题介绍 在源码编译安装httpd时,./configure执行无错误,到make时就报错,在网络上搜索了很多文章,很多方法如换apr-util的低版本并不能很 ...

  6. configprase模块,配置文件模块

    import configparser # config = configparser.ConfigParser() # config["DEFAULT"] = {'Port':3 ...

  7. GIS开源程序收集

    每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价   分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...

  8. 437路径总和III

    题目: 给定一个二叉树,它的每个结点都存放着一个整数值.找出路径和等于给定数值的路径总数.路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点).来源: ht ...

  9. python之openpyxl生成excel文件

    项目需要,需要自动生成PDF测试报告.经过对比之后,选择使用了reportlab模块. 项目背景:开发一个测试平台,供测试维护测试用例,执行测试用例,并且生成测试报告(包含PDF和excel),将生成 ...

  10. 转 Java的各种打包方式(JAR/WAR/EAR/CAR)

    JAR (Java Archive file) 包含内容:class.properties文件,是文件封装的最小单元:包含Java类的普通库.资源(resources).辅助文件(auxiliary ...