欢迎各位兄弟 发布技术文章

这里的技术是共享的

自强学堂 9) Django渲染json到模板

有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上。

这里讲述两种方法

一,页面加载完成后,在页面上操作,在页面上通过 ajax 方法得到新的数据并显示在网页上,这种情况适用于动态加载一些内容,但是我们不知道用户需要哪个,比如用户输入一个值或者点击某个地方,动态地把内容显示在网页上,详见:Django Ajax

二,直接在视图函数(views.py中的函数)中渲染一个 list 或 dict 和其它的网页部分一起显示到网页上

需要注意的是,我们如果直接这么做,传递到 js 的时候,网页的内容会被转义,得到的格式会报错。

views.py

1
2
3
4
5
6
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>

访问时会得到 Uncaught SyntaxError: Unexpected token ILLEGAL

需要注意两点:1. views.py中返回的函数中的值要用 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>

完整代码下载:zqxt_json.zip (基于Django 1.8,注意settings.py文件和低版本可能不兼容,其它部分相同)

 
被顶起来的评论
  • 涂伟忠

    回复 梦回江南曲: 内容是动态出来的,请自己看一下原代码。至于为什么要用到渲染json,一般用来加载一些动态的内容,实现 Python与js之间的传递,等你用到的时候你就知道了。

 
  • 漩涡鸣人影分身

    奇怪了,为何没有动态效果

  • 梦回江南曲

    博主您好~~为什么要用Json渲染到模板呢,我运行了你的代码,这段代码为什么写了JS但是没有动态效果呢~~

    • 涂伟忠

      内容是动态出来的,请自己看一下原代码。至于为什么要用到渲染json,一般用来加载一些动态的内容,实现 Python与js之间的传递,等你用到的时候你就知道了。

      • ggx

        我试了一下貌似不用json.dumps()也是可以的直接也js中使用{{ XX|safe}}就行了,就是直接用safe过滤即可;还有获取字符变量可以直接用'{{xxx}}' 只要在花括号两端加上引号即可.

      • 涂伟忠

        回复 ggx: JSON一般指一个数组(列表)或 字典,字符串传出比较简单

      • ggx

        回复 涂伟忠: 我昨天试了一下 数组和列表或字典也可以不使用json.dumps 直接在页面上用{{xx|safe}}就足够了

      • 涂伟忠

        回复 ggx: 你的测试应该是基于英文,而且没有使用 unicode 的情况,如果用了 unicode,必须使用 json.dumps 的

      • 梦回江南曲

        谢谢博主~~期待您的持续更新~~非常感谢,大力支持~~

来自 http://www.ziqiangxuetang.com/django/django-json-templates.html
唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码