Django 前后台的数据传递示列
Django 前后台的数据传递的方法
Django 从后台往前台传递数据时有多种方法可以实现。
最简单的后台是这样的:
1
2
3
4
|
from django.shortcuts import render def main_page(request): return render(request, 'index.html' ) |
这个就是返回index.html的内容,但是如果要带一些数据一起传给前台的话,该怎么办呢?
一 view -> HTML 使用Django模版
这里是这样:后台传递一些数据给html,直接渲染在网页上,不会有什么复杂的数据处理(如果前台要处理数据,那么就传数据给JS处理)
Django 代码:
1
2
3
4
5
|
from django.shortcuts import render def main_page(request): data = [ 1 , 2 , 3 , 4 ] return render(request, 'index.html' , { 'data' : data}) |
html使用 {{ }}
来获取数据
1
|
< div >{{ data }}</ div > |
可以对可迭代的数据进行迭代:
1
2
3
|
{% for item in data%} < p >{{ item }}</ p > {% endfor %} |
该方法可以传递各种数据类型,包括list,dict等等。
而且除了 {% for %} 以外还可以进行if判断,大小比较等等。具体的用法读者可以自行搜索。
二 view-> JavaScript
如果数据不传给html用,要传给js用,那么按照上文的方式写会有错误。
需要注意两点:
1.views.py中返回的函数中的值要用 json.dumps()
处理
2.在网页上要加一个 safe 过滤器。
代码:
views.py
1
2
3
4
5
6
7
8
9
10
|
# -*- coding: utf-8 -*- import json from django.shortcuts import render def main_page(request): list = [ 'view' , 'Json' , 'JS' ] return render(request, 'index.html' , { 'List' : json.dumps( list ), }) |
JavaScript部分:
1
|
var List = {{ List|safe }}; |
三 JavaScript Ajax 动态刷新页面
这个标题的意思是:网页前台使用Ajax发送请求,后台处理数据后返回数据给前台,前台不刷新网页动态加载数据
Django 代码:
1
2
3
4
5
6
7
8
9
|
def scene_update_view(request): if request.method = = "POST" : name = request.POST.get( 'name' ) status = 0 result = "Error!" return HttpResponse(json.dumps({ "status" : status, "result" : result })) |
JS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function getSceneId(scece_name, td) { var post_data = { "name" : scece_name, }; $.ajax({ url: {% url 'scene_update_url' %}, type: "POST" , data: post_data, success: function (data) { data = JSON.parse(data); if (data[ "status" ] == 1) { setSceneTd(data[ "result" ], scece_name, td); } else { alert(data[ "result" ]); } } }); } |
JS 发送ajax请求,后台处理请求并返回status, result
在 success: 后面定义回调函数处理返回的数据,需要使用 JSON.parse(data)
Django 前后台的数据传递示列的更多相关文章
- Django与JS交互的示例代码-django js 获取 python 字典-Django 前后台的数据传递
Django与JS交互的示例代码 Django 前后台的数据传递 https://www.cnblogs.com/xibuhaohao/p/10192052.html 应用一:有时候我们想把一个 li ...
- Django 前后台的数据传递
Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...
- Python Django 前后端数据交互 之 后端向前端发送数据
Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...
- django 前后台传递数据
前几天,我们完成了用django orm对数据进行操作.接下来,我们要把数据从后台放到前台. 1.用get方式传值 get:就是在URL拼接字符串,在后台,用request.get方式取 2.用pos ...
- C#曲线分析平台的制作(一,ajax+json前后台数据传递)
在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...
- 后端list集合中的数据传递到前台HTML中显示(表格形式)
关键字:web项目中前后台数据传递问题 在学习web项目的过程中,我们肯定会遇到前后台数据交换问题.这个问题我也思考了很久,今天借此总结一下.由于博主水平有限,如有不当之处,还请大家多多指正,,废话不 ...
- Android零基础入门第83节:Activity间数据传递方法汇总
在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间数据的传递. 一.常用数据类型 在前面几节我们只学习了一些常用类型的数据传 ...
- ASP.NET MVC3中Controller与View之间的数据传递总结
一. Controller向View传递数据 1. 使用ViewData传递数据 我们在Controller中定义如下: ViewData["Message_ViewData& ...
- ASP.NET MVC3中Controller与View之间的数据传递
在ASP.NET MVC中,经常会在Controller与View之间传递数据,因此,熟练.灵活的掌握这两层之间的数据传递方法就非常重要.本文从两个方面进行探讨: 一. Controller向Vie ...
随机推荐
- spring boot 引导
链接:https://www.zhihu.com/question/39483566/answer/243413600 Spring Boot 的优点快速开发,特别适合构建微服务系统,另外给我们封装了 ...
- Jenkins--持续集成服务器
1.持续集成: 1.1概念 持续集成,Continuous integration ,简称CI. 集成:我们所有项目的代码都是托管在SVN服务器上.每个项目都要有若干个单元测试,并有一个所谓集成测试. ...
- JMeter5.0 边界提取器使用
需求: 需要提取下图中requestNo的值,使用JMeter3.1和4.0版本,使用正则表达式提取器始终无法获取 而后使用JMeter5.0的边界提取器,不需要写复杂的正则表达式,只要填写左右边界即 ...
- ABP官方文档翻译 2.4 日志
日志 服务端 获取记录器 基类日志记录器 配置 Abp.Castle.Log4Net包 客户端 服务端 ABP使用Castle Windsor`s 日志设备.它可以使用不同的日志类库:Log4Net, ...
- MySQL中exists与in的使用
exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当 exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返回当前loop到的这条记录, ...
- 20145328 《Java程序设计》第2周学习总结
20145328 <Java程序设计>第2周学习总结 教材学习内容总结 掌握了上周没有学会的IDEA的用法 掌握了一些快捷键用法,在用IDEA编写程序的过程中的体验比直接使用cmd进行编写 ...
- MR案例:小文件合并SequeceFile
SequeceFile是Hadoop API提供的一种二进制文件支持.这种二进制文件直接将<key, value>对序列化到文件中.可以使用这种文件对小文件合并,即将文件名作为key,文件 ...
- cogs 1487. 麻球繁衍
★ 输入文件:tribbles.in 输出文件:tribbles.out 评测插件 时间限制:3 s 内存限制:256 MB [题目描述] 万有引力定律: “使物体相互靠近的力的大小与 ...
- zookeeper项目使用几点小结
背景 前段时间学习了zookeeper后,在新的项目中刚好派上了用场,我在项目中主要负责分布式任务调度模块的开发,对我自己来说是个不小的挑战. 分布式的任务调度,技术上我们选择了zookeeper,具 ...
- nginx解决跨域问题
背景:由于公司有个项目是.net写的,但是开发人员已经离职好久了.老项目也不怎么变动就没有招新人,于是乎就把项目交接给了一位php开发人员. 今天那位php开发人员跑过来,说https://wap.a ...