Django传递数据给JS
这里讲述两种方法:
一,页面加载完成后,在页面上操作,在页面上通过 ajax 方法得到新的数据(再向服务器发送一次请求)并显示在网页上,这种情况适用于页面不刷新的情况下,动态加载一些内容。比如用户输入一个值或者点击某个地方,动态地把相应内容显示在网页上。
这种请问详见 Django Ajax 一节的内容。
二,直接在视图函数(views.py中的函数)中将 JSON对象 和网页其它内容一起传递到Django模板(一次性地渲染,还是同一次请求)。
请看下面的示例:
views.py
1
2
3
4
5
6
7
|
from __future__ import unicode_literals from django.shortcuts import render def home(request): List = [ '自强学堂' , '渲染Json到模板' ] return render(request, 'home.html' , { 'List' : List }) |
home.html 中的一部分
1
2
3
4
|
< script type = "text/javascript" > var List = {{ List }}; alert(List); </ script > |
需要注意的是,我们如果直接这么做,传递到 js 的时候,网页的内容会被转义,得到的格式会报错。
访问时会得到 Uncaught SyntaxError: Unexpected token ILLEGAL
需要注意两点:
1. 视图函数中的字典或列表要用 json.dumps()处理。
2. 在模板上要加 safe 过滤器。
views.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
# -*- coding: utf-8 -*- from __future__ import unicode_literals import json from django.shortcuts import render def home(request): List = [ '自强学堂' , '渲染Json到模板' ] Dict = { 'site' : '自强学堂' , 'author' : '涂伟忠' } return render(request, 'home.html' , { 'List' : json.dumps( List ), 'Dict' : json.dumps( Dict ) }) |
home.html 只给出了 js 核心部分:
1
2
3
4
|
//列表 var List = {{ List|safe }}; //字典 var Dict = {{ Dict|safe }}; |
如果你对 js 比较熟悉,到此为止,后面的不用看了。
如果不太熟悉,可以参考下面的更详细的代码。
html 完全代码及完整代码下载(最后面):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html> < html > < head > < title >欢迎光临 自强学堂!</ title > < script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" ></ script > </ head > < body > < div id = "list" > 学习 </ div > < div id = 'dict' ></ div > < script type = "text/javascript" > //列表 var List = {{ List|safe }}; //下面的代码把List的每一部分放到头部和尾部 $('#list').prepend(List[0]); $('#list').append(List[1]); console.log('--- 遍历 List 方法 1 ---') for(i in List){ console.log(i);// i为索引 } console.log('--- 遍历 List 方法 2 ---') for (var i = List.length - 1; i >= 0; i--) { // 鼠标右键,审核元素,选择 console 可以看到输入的值。 console.log(List[i]); }; console.log('--- 同时遍历索引和内容,使用 jQuery.each() 方法 ---') $.each(List, function(index, item){ console.log(index); console.log(item); }); // 字典 var Dict = {{ Dict|safe }}; console.log("--- 两种字典的取值方式 ---") console.log(Dict['site']); console.log(Dict.author); console.log("--- 遍历字典 ---"); for(i in Dict) { console.log(i + Dict[i]);//注意,此处 i 为键值 } </ script > </ body > </ html |
Django传递数据给JS的更多相关文章
- python学习-- Django传递数据给JS
var List = {{ List|safe }};//safe 必须存在
- Django:之传递数据给JS、Ajax和Ajax CSRF认证
Django传递数据给JS 有时候我们想把一个list或者dict传递给javascript,处理后显示到网页上,比如要用js进行可视化到数据. 请注意:如果是不处理,直接显示在网页上,用Django ...
- Django:django后台传递数据到js中
#奇怪传递字典时前台接收不到???datalist= [{'site': '自强学堂', 'author': '涂伟忠'}]#只要列表能接收# datalist=[[93, 93, 0, 100.01 ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- Vue.js 3.x 中跨层级组件如何传递数据?
provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...
- cocos2d JS 自定义事件分发器(接收与传递数据) eventManager
简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...
- Django 仿ajax传递数据(Django十)
之前用form表单传递数据,没有遇到任何问题 具体见:https://blog.csdn.net/qq_38175040/article/details/104867747 然后现在我想用ajax传递 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
随机推荐
- 路由器设置 WDS 桥接
步骤: 1.先更改路由器LAN口地址,然后重启路由器 2.连接SSID信道名称,先关闭DHCP服务,然后进入无线设置,基本设置,更改SSID号,开启WDS桥接,保存 3.连接新的SSID名称,无线设置 ...
- LIUNX随堂学习-2 用户和组,增、删、改、查
1.less的使用 less /etc/group #查看组的信息 less /etc/gshadow #查看组密码 例如:less /tmp/aa ...
- Redis过期命令
Redis键的过期时长的设定 ·命令名称:EXPIRE ·语法:EXPIRE key seconds ·功能:为给定key设置生存时间,当key过期时(生存时间为0),它会被自动删除 ·返回值:设置成 ...
- linux时间同步ntpdate
1.安装ntpdate,执行以下命令 yum install ntpdate -y 2.手工同步网络时间,执行以下命令,将从time.nist.gov同步时间 ntpdate 0.asia.pool. ...
- 怎样给回调函数绑定this
在三种绑定this的方法中, Function.prototype.call() 和 Function.prototye.apply() 都是会立即执行该函数的, 但回调函数是不能立即执行的, 它只是 ...
- IdentityServer4密码模式接入现有用户数据表
具体接入identityserver请看文档,这里只简单列举部分步骤 1.创建一个web项目,引入Identityserver4的nuget包 2.新建一个类,实现IResourceOwnerPass ...
- http协议与soap协议之间的区别
http是标准超文本传输协议.使用对参数进行编码并将参数作为键值对传递,还使用关联的请求语义.每个协议都包含一系列HTTP请求标头及其他一些信息,定义客户端向服务器请求哪些内容,服务器用一系列HTTP ...
- pytorch入门1——简单的网络搭建
代码如下: %matplotlib inline import torch import torch.nn as nn import torch.nn.functional as F from tor ...
- SpringBoot mysql出现The server time zone value '�й���ʱ��' is unrecogni
MySql :8.0.18 引入的mysql驱动: SpringBoot整合Mybatis的框架,在访问Controller的时候 : ava.sql.SQLException: The server ...
- Vivado问题集锦
1.添加包含子IP的模块到block design,报错如下所示: 错误的后面提供了解决方法:在tcl命令行中输入如下指令,添加子IP的xci文件即可. set_property generate_s ...