51Testing软件测试论坛

标题: django与jquery数据传递过程 [打印本页]
作者: 海鸥一飞    时间: 2019-1-24 16:19
标题: django与jquery数据传递过程
本帖最后由 海鸥一飞 于 2019-1-24 16:24 编辑

初次请求数据：

通常django通过url请求views函数后，渲染模板数据到网页中。当模板中使用了jquery时，渲染过程不变，地址栏仍然通过输入对应地址，加载模板到网页。

不刷新页面的情况下，再次/多次请求数据：
在url.py中定义新的url，关联views与模板中的jquery。

1、模板中的jquery src：可使用本地的，也可使用CDN上的
2、CSRF认证：
  1. $(document).ready(function(){
  2.         $.ajaxSetup({
  3.             data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  4.         });
  5.     ......
  6. });
复制代码

3、url.py中定义
  1. url(r'^add/[p=26, null, left]第一个url用于在地址栏输入访问，第二和第三个用于jquery访问views.py中的ajax_list和ajax_dict:[/p][p=26, null, left]下面两个函数返回了json数据（同样可将数据库数据转换为json），页面通过jquery获取后呈现。[/p][code]def ajax_list(request):
  2.     a = list(range(100))
  3.     return HttpResponse(json.dumps(a), content_type='application/json')

  5. def ajax_dict(request):
  6.     name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
  7.     return HttpResponse(json.dumps(name_dict), content_type='application/json')
复制代码

4、模板中的jquery

  1. $('#list').click(function(){
  2.             $.getJSON('/ajax_list/',function(ret){
  3.             //返回值 ret 在这里是一个列表
  4.                 for (var i = ret.length - 1; i >= 0; i--) {
  5.                 // 把 ret 的每一项显示在网页上
  6.                 $('#list_result').append(' ' + ret[i])
  7.                 };
  8.             })
  9.         })

  11.       // 字典 dict
  12. $('#dict').click(function(){
  13.             $.getJSON('/ajax_dict/',function(ret){
  14.             //返回值 ret 在这里是一个字典
  15.             $('#dict_result').append(ret.twz + '<br>');
  16.             // 也可以用 ret['twz']
  17.             })
  18.         })
复制代码


5、效果如下：

输入访问地址后的页面：


[attach]121267[/attach]


通过点击‘Ajax加载列表’和‘Ajax加载字典’，效果如下：


[attach]121268[/attach]









欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2