python1225.png
Django传递数据给JS
把一个list或者dict传递给javascript,处理后显示到网页，比如要用js进行可视化的数据。
这里讲述两种方法。
一.也买那加载完成后，在页面上操作，在页面通过ajax请求得到新的数据（再向服务器发送一次请求）并显示在页面上，这种情况适用于页面不刷新的情况，动态加载一些内容。
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
需要注意两点：
views.py中返回的函数中的值要用 json.dumps()处理
在网页上要加一个 safe 过滤器。
views.py
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), # json.dumps()处理
'Dict': json.dumps(Dict) # json.dumps()处理
})
html.html只给出js部分：
<script type="text/javascript">
//列表
var List = {{ List|safe }};
//下面的代码把List的每一部分放到头部和尾部
$('#list').prepend(List[0]);
$('#list').append(List[1]);
console.log('--- 遍历 List 方法 一 ---')
for(i in List){
console.log(i);// i为索引
}
console.log('--- 遍历 List 方法 二 ---')
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("--- 2种字典的取值方式 ---")
console.log(Dict['site']);
console.log(Dict.author);
console.log("--- 遍历字典 ---");
for(i in Dict) {
console.log(i + Dict[i]);//注意，此处 i 为键值
}
</script>
Django Ajax
有时候页面需要在不刷新的情况下载入一些内容。
例子：在不刷新的情况下显示计算结果到页面上
<html>
<body>
<p>请输入两数字</p>
<form action="/add/" method="get">
a: <input type="text" id="a" name="a"> <br>
b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>提交</button>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sum").click(function(){
var a = $("#a").val();
var b = $("#b").val();
$.get("/add/",{'a':a,'b':b}, function(ret){
$('#result').html(ret)
})
});
});
</script>
</body>
</html>
更复杂的例子，传递一个书在或者字典，由js处理，再显示出来。
from django.http import JsonResponse
def ajax_list(request):
a = range(100)
return JsonResponse(a, safe=False)
def ajax_dict(request):
name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
网友评论