这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 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的更多相关文章

  1. python学习-- Django传递数据给JS

    var List = {{ List|safe }};//safe 必须存在

  2. Django:之传递数据给JS、Ajax和Ajax CSRF认证

    Django传递数据给JS 有时候我们想把一个list或者dict传递给javascript,处理后显示到网页上,比如要用js进行可视化到数据. 请注意:如果是不处理,直接显示在网页上,用Django ...

  3. Django:django后台传递数据到js中

    #奇怪传递字典时前台接收不到???datalist= [{'site': '自强学堂', 'author': '涂伟忠'}]#只要列表能接收# datalist=[[93, 93, 0, 100.01 ...

  4. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  5. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

  6. Vue.js 3.x 中跨层级组件如何传递数据？

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  7. cocos2d JS 自定义事件分发器(接收与传递数据) eventManager

    简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...

  8. Django 仿ajax传递数据（Django十）

    之前用form表单传递数据,没有遇到任何问题 具体见:https://blog.csdn.net/qq_38175040/article/details/104867747 然后现在我想用ajax传递 ...

  9. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

随机推荐

  1. hadoop WordCount例子详解。

    [学习笔记] 下载hadoop-2.7.4-src.tar.gz,拷贝hadoop-2.7.4-src.tar.gz中hadoop-mapreduce-project\hadoop-mapreduce ...

  2. 【CodeForces】1172E. Nauuo and ODT

    题解 看了一遍题解(以及代码)但是没写代码-- 后来做梦的时候忽然梦到了这道题--意识到我需要补一下-- 这道题就是,对于每种颜色,把没有染成这种颜色的点标成黑点,然后计算每个联通块的平方 然后每个点 ...

  3. JS将本地图片转化成base64码

    在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...

  4. Verilog整理

    1.两种实例化 2.运算符//逻辑运算+按位运算//拼接运算符 3.reg默认为1位 4.{16{1}}与{16{1'b1}}不同 5.[1023:0] in ha[3:0]=(in>>( ...

  5. python — 索引与pymysql模块

    1. 索引 1.1 索引原理 1.什么是索引 ?-- 目录 索引就是建立起的一个在存储表阶段就有的一个存储结构,能在查询的时候加速. 2.索引的重要性: 读写比例 为 10:1,所有读(查询)的速度就 ...

  6. python之SQLite笔记

    sqlite3 打开文件并创建游标 conn = sqlite3.connect('adressbook.db')c = conn.cursor() 连接对象:sqlite3.connect('数据文 ...

  7. Asp.net core 学习笔记 2.2 migration to 3.0

    Ef core 3.0 一些要注意的改变 refer : https://docs.microsoft.com/en-us/ef/core/what-is-new/ef-core-3.0/breaki ...

  8. aliplay获取播放时长

    <div id="player-con" class="frequency-pic"></div> <link rel=" ...

  9. PAT-1014 Waiting in Line (30 分) 优先队列

    Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...

  10. CAS 5.x搭建常见问题系列(2).PKIX path building failed

    错误原因 服务端的证书是不安全的,Cas的客户端在调用时因为安全提醒造成调用失败. CAS的客户端需要导入服务端的证书后,就正常了. 具体操作步骤如下: 1. 首先启动tomcat,看下之前搭建的ca ...