Django ajax 使用示例

最新推荐文章于 2024-08-19 15:26:53 发布

weixin_30376323

最新推荐文章于 2024-08-19 15:26:53 发布

阅读量94

点赞数

文章标签： json python javascript ViewUI

原文链接：http://www.cnblogs.com/python01/p/10172485.html

版权

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'}

转载于:https://www.cnblogs.com/python01/p/10172485.html

weixin_30376323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django ajax 使用示例

Django传递数据给JS把一个list或者dict传递给javascript,处理后显示到网页，比如要用js进行可视化的数据。这里讲述两种方法。一.也买那加载完成后，在页面上操作，在页面通过ajax请求得到新的数据（再向服务器发送一次请求）并显示在页面上，这种情况适用于页面不刷新的情况，动态加载一些内容。 1 views.py 2 from ...
复制链接

扫一扫