django 返回ajax html,Django 前台通过json 取出后台数据
前台通过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')
此时浏览器返回的数据
步骤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 代码
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('失败')
}
});
}
此时前台浏览器 显示数据
方法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
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('失败')
}
});
}
django 返回ajax html,Django 前台通过json 取出后台数据相关推荐
- Django 前台通过json 取出后台数据
转载自:https://my.oschina.net/esdn/blog/814111 步骤1:后台数据通过 JSON 序列化成字符串 注意:1.json是1个字符串 2.通过json.dumps(' ...
- ajax前台传json到后台解析的方法以及注意事项
首先,如果是maven工程的话,需要在pom.xml文件中添加下方依赖<dependency><groupId>net.sf.json-lib</groupId>& ...
- 前台传JSON到后台
现在,有一个需求,我需要将表格中选中行的数据中的一部分传直接传到控制器中,然后保存到另外一张表中.一开始,我就想到在前台使用ajax构造json数据,然后控制器直接通过list接收. 选中界面中的行, ...
- 零基础学小程序006(后台数据的获取与解析)----请求服务器json数据展现到小程序上
视频讲解地址:https://edu.csdn.net/course/play/9531/265552 小程序云开发讲解视频:https://edu.csdn.net/course/detail/96 ...
- django通过ajax请求接口返回多条数据,并动态生成表格,请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
- django返回json格式的数据的方法
需求问题描述: 在使用ajax时,回调函数需要接受多个参数,查询资料,得知使用json格式的数据比较好(当然也可以使用xml).由于项目使用的是django,这就牵扯到django后端如何传输json ...
- openstack页面自定义插件使用详解(django、ajax、post)(zTree为例)
2019独角兽企业重金招聘Python工程师标准>>> 感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Be ...
- Django 和 Ajax 简介
在Django里面,目前我们都是通过前端页面的form提交GET或者POST请求到后台,后台处理了业务函数之后,把渲染之后的字符串结果发回给前端.这样的结果是每次页面都会进行刷新. 假设一个场景我们使 ...
- ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ,如何更新模板里里变量
最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...
最新文章
- Windows Form中的Grid Control
- EF Core 生成数据库
- 在Golang开发中使用Redis
- Error: listen EADDRINUSE: address already in use :::8080
- [转]tomcat部署与Context
- Android 系统性能优化(55)---Android 性能优化之内存优化
- 二、十六进制数互相转换
- 【知识图谱系列】知识图谱表示学习综述 | 近30篇优秀论文串讲
- linux拿虚拟机充当路由,Linux通过虚拟机模拟路由器实现主机跨路由通信
- java swing开发打飞机的小游戏源代码下载
- STM32命名规则 STM32选型手册
- Spine3.8.75 下载
- AlphaGo算法最清晰的解读
- Linux内核设计与实现 第17章 设备与模块
- 宝塔linux优化wordpress,WordPress加速 宝塔面板速度优化方案 Memcached + Redis | 「讲文兄博客」...
- Unity 六边形地图系列(一) 【笔记】: 创建一个六边形网格
- Work20230405
- Mysql数据库最佳性能优化
- 从滴滴的Flink CEP引擎说起
- 大话 Oracle Grid 云时代的RAC
热门文章
- http协议报文体_HTTP协议扫盲(七)请求报文之 GET、POST-FORM 和 POST-FILE
- ubuntu13.10 编译时 关于链接xlib 库阶段出错的问题解决
- s3c2440的内存管理机制
- aliyun centos6 安装mysql_阿里云CentOS6.8安装MySQL5.6
- php怎么调试小程序,教你如何配置微信小程序
- 【转】matlab与C/C++混合编程——在Windows/Linux上调用Matlab编译的动态库文件
- 【转】Wireshark网络抓包(四)——工具
- 【转】三、QT例子-打开一个图片并且显示
- 【转】3.3(译)构建Async同步基元,Part 3 AsyncCountdownEvent
- SharePoint 编程指南(转)