Django传递数据给JS
把一个list或者dict传递给javascript,处理后显示到网页，比如要用js进行可视化的数据。 这里讲述两种方法。
一.也买那加载完成后，在页面上操作，在页面通过ajax请求得到新的数据（再向服务器发送一次请求）并显示在页面上，这种情况适用于页面不刷新的情况，动态加载一些内容。
1 views.py
2 from __future__ import unicode_literals
3 from django.shortcuts import render
4
5 def home(request):
6 List = ['北京尚学堂', '渲染Json到模板']
7 return render(request, 'home.html', {'List': List})
8
9 home.html 中的一部分
10
11 <script type="text/javascript">
12 var List = {{ List }};
13 alert(List);
14 </script>
需要注意的是，我们如果直接这么做，传递到 js 的时候，网页的内容会被转义，得到的格式会报错。
访问时会得到 Uncaught SyntaxError: Unexpected token ILLEGAL
需要注意两点：
-
views.py中返回的函数中的值要用 json.dumps()处理
-
在网页上要加一个 safe 过滤器。
views.py
1 from __future__ import unicode_literals
2 import json
3 from django.shortcuts import render
4
5 def home(request):
6 List = ['北京尚学堂', '渲染Json到模板']
7 Dict = {'site': '北京尚学堂', 'author': '尚小堂'}
8 return render(request, 'home.html', {
9 'List': json.dumps(List), # json.dumps()处理
10 'Dict': json.dumps(Dict) # json.dumps()处理
11 })
html.html只给出js部分：
1 <script type="text/javascript">
2 //列表
3 var List = {{ List|safe }};
4 //下面的代码把List的每一部分放到头部和尾部
5 $('#list').prepend(List[0]);
6 $('#list').append(List[1]);
7
8 console.log('--- 遍历 List 方法 一 ---')
9 for(i in List){
10 console.log(i);// i为索引
11 }
12
13 console.log('--- 遍历 List 方法 二 ---')
14 for (var i = List.length - 1; i >= 0; i--) {
15 // 鼠标右键，审核元素，选择 console 可以看到输入的值。
16 console.log(List[i]);
17 };
18
19 console.log('--- 同时遍历索引和内容，使用 jQuery.each() 方法 ---')
20 $.each(List, function(index, item){
21 console.log(index);
22 console.log(item);
23 });
24
25 // 字典
26 var Dict = {{ Dict|safe }};
27 console.log("--- 2种字典的取值方式 ---")
28 console.log(Dict['site']);
29 console.log(Dict.author);
30 console.log("--- 遍历字典 ---");
31 for(i in Dict) {
32 console.log(i + Dict[i]);//注意，此处 i 为键值
33 }
34 </script>
Django Ajax 有时候页面需要在不刷新的情况下载入一些内容。
例子：在不刷新的情况下显示计算结果到页面上
1 <html>
2 <body>
3 <p>请输入两数字</p>
4 <form action="/add/" method="get">
5 a: <input type="text" id="a" name="a"> <br>
6 b: <input type="text" id="b" name="b"> <br>
7 <p>result: <span id='result'></span></p>
8 <button type="button" id='sum'>提交</button>
9 </form>
10 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
11 <script>
12 $(document).ready(function(){
13 $("#sum").click(function(){
14 var a = $("#a").val();
15 var b = $("#b").val();
16
17 $.get("/add/",{'a':a,'b':b}, function(ret){
18 $('#result').html(ret)
19 })
20 });
21 });
22 </script>
23 </body>
24 </html>
更复杂的例子，传递一个书在或者字典，由js处理，再显示出来。
1 from django.http import JsonResponse
2
3 def ajax_list(request):
4 a = range(100)
5 return JsonResponse(a, safe=False)
6
7 def ajax_dict(request):
8 name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}