文章来源:http://www.ziqiangxuetang.com/django/django-json-templates.html
Django传递数据给JS
有时候我们想把一个 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.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
>
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
注意!!
我在测试代码的时候,写view.py有这样一个问题:
定义了 FP_list = Table.objects.filter(user_id=user_id).order_by('standardization')
context = {'form':form,'Result_List':json.dumps(
FP_list)}
此时会报错,因为
FP_list不符合json的转化条件,FP_list是查询的结果对象。因此这里需要把FP_list做转换,转换成List或者Dist形式
|