django ajax
来源:互联网 发布:yum配置文件 编辑:程序博客网 时间:2024/06/16 09:22
Django传递数据给JS
把一个list或者dict传递给javascript,处理后显示到网页,比如要用js进行可视化的数据。
这里讲述两种方法。
一,也买那加载完成后,在页面上操作,在页面通过ajax请求得到新的数据(再向服务器发送一次请求)并显示在页面上,这种情况适用于页面不刷新的情况,动态加载一些内容。
views.pyfrom __future__ import unicode_literalsfrom django.shortcuts import renderdef 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_literalsimport jsonfrom django.shortcuts import renderdef 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 方法 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>
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>
2.更复杂的例子,传递一个书在或者字典,由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'}
0 0
- Django ajax
- Django AJAX
- Django AJAX
- django+ajax
- Django ajax
- Django + ajax
- django ajax
- Django Ajax with CSRF
- django 与ajax教程
- django ajax关于csrf_token
- ajax+jquery+django
- django ajax初步
- django 中的ajax
- Django ajax post
- django ajax 应用实例
- Django AJAX异步提交
- django与ajax
- Django之Ajax
- android 中listview添加数据,以及listview优化
- 说说 Objective-C 里的 @()
- 图片上传form表单需要设置的属性
- hog特征原理描述
- LeetCode107. Binary Tree Level Order Traversal II
- django ajax
- Linux下 文件描述符(fd)与 文件指针(FILE*)
- Android中使用注解来代替枚举类的方式
- Spark源码学习笔记6-RpcEnv(Rpc实现层)
- php实现归并排序
- C++ 使用单向链表实现Stack
- 计算机视觉︱图像取证技术
- Context都没弄明白,还怎么做Android开发?
- kNN算法及实例(一)