django与jquery数据传递过程

海鸥一飞

初次请求数据：

通常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')
   
4. 
   
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.         })
   
10. 
    
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、效果如下：

输入访问地址后的页面：

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