标签：
Django传递数据给JS
有时候我们想把一个list或者dict传递给javascript，处理后显示到网页上，比如要用js进行可视化到数据。
请注意：如果是不处理，直接显示在网页上，用Django模版就可以了，请看前面的教程。
这里讲述两种方法：
一、页面加载完成后，在页面上操作，在页面上通过ajax方法得到新的数据（再向服务器发送一次请求）并显示在网页上，在这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。
这种请详见下面Django Ajax一节的内容。
二、直接在视图函数（views.py中的函数）中渲染一个list或dict的内容，和网页其它部分一起显示到网页上（一次性地渲染，还是同一次请求）。
views.py
from __future__ import unicode_literals
from django.shortcuts import render
def home(request):
List = [‘吴老二博客‘, ‘渲染Json到模板‘]
return render(request, ‘home.html‘, {‘List‘: List})
home.html中的一部分
<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
# -*- 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核心部分：
//列表
var List = {{ List|safe }};
//字典
var Dict = {{ Dict|safe }};
如果你对js比较熟悉，至此为止，下面的不用于看了，如果不太熟悉，可以参考下面的更详细的代码。
html完全代码及完整代码下载（最后面）：
<!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>
完整代码下载：json.zip（基于Django 1.8，注意settings.py文件和低版本可能不兼容，其它部分相同）
Django:之传递数据给JS、Ajax和Ajax CSRF认证
标签：
原文地址：http://www.cnblogs.com/wulaoer/p/5385062.html
