logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Django传递数据给JS

 小飞苑 2017-01-08

有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。

请注意：如果是不处理，直接显示在网页上，用Django模板就可以了，请看前面的教程。


这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

这种请问详见 Django Ajax 一节的内容。


二，直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上（一次性地渲染，还是同一次请求）。

请看下面的示例：

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>

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

访问时会得到 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./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>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 小飞苑 > 《Django》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多