这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 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. 《Mysql - SQL优化》

    一:在查询语句时,应该注意的优化问题 - SELECT语句务必指明字段名称 - SELECT * 会增加很多不必要的消耗(CPU.IO.内存.网络带宽) - 同时会让 Mysql 优化器无法优化 -  ...

  2. Spring Cloud Ribbon说明

    浅谈Spring Cloud Ribbon的原理 Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,它基于Netflix Ribbon实现.通过Spring Clo ...

  3. 【百度之星2019】Strassen

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6719 在本题中,我们只有两种方法计算两个的矩阵的乘积,第一种为定义法,需要次乘法和次加法.第二种为 ...

  4. const函数返回自身的引用也是常量引用

    const函数返回自身的引用也是const 解决:根据对象是否为consr重载

  5. 浅谈C++继承

    C++中的继承 1.继承概念及定义:     概念:是面向对象程序设计使代码可以复用的最重要的手段-----继承是类设计层次的复用     定义:            父类->基类:子类-&g ...

  6. poj 3617 弱鸡贪心

    比赛的时候扣了一道贪心的题目,不会写,,现在补一补一些基础的贪心. 题意:给定一个字符串s,要求按下列操作生成一个新串t--每次从s串中的最前和最后取一个字符给t,要求生成的t字典序最小. 题解:由于 ...

  7. （十四）角色管理（Ztree插件的基本使用）

    1. 建表 角色表 菜单表 角色-菜单(这个表中的role_id和menuu_id都不能被设置为主键,否则当插入一个新角色的时候,一个角色可能拥有多个菜单(role_id重复),一个菜单可能被多个角色 ...

  8. SQL优化中的重要概念：阻塞

    原文:SQL优化中的重要概念:阻塞 上一篇讲到锁定的概念,那么接下来就是如何找到由于锁定而发生阻塞的进程,并解决阻塞问题. 1.会话1,修改数据,但没有提交事务 BEGIN TRAN select @ ...

  9. IdentityServer4同时使用多个GrantType进行授权和IdentityModel.Client部分源码解析

    首先,介绍一下问题. 由于项目中用户分了三个角色:管理员.代理.会员.其中,代理又分为一级代理.二级代理等,会员也可以相互之间进行推荐. 将用户表分为了两个,管理员和代理都属于后台,在同一张表,会员单 ...

  10. Unity 自定义"=="操作符 [翻译来源blogs.unity3d,2014/05]

    主要内容来源 https://blogs.unity3d.com/cn/2014/05/16/custom-operator-should-we-keep-it/ 在我们代码里,如果有这样的代码: i ...