django与jquery数据传递过程

——本文通过学习自强学堂后，结合自己的理解梳理而成

初次请求数据：

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

不刷新页面的情况下，再次/多次请求数据：

在url.py中定义新的url，关联views与模板中的jquery。

1、模板中的jquery src：可使用本地的，也可使用CDN上的

2、CSRF认证：

$(document).ready(function(){
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
    ......
});

3、url.py中定义

    url(r'^add/$',js_views.deal,name='add'),
    url(r'^ajax_list/$', js_views.ajax_list, name='ajax-list'),
    url(r'^ajax_dict/$', js_views.ajax_dict, name='ajax-dict'),

第一个url用于在地址栏输入访问，第二和第三个用于jquery访问views.py中的ajax_list和ajax_dict:

下面两个函数返回了json数据（同样可将数据库数据转换为json），页面通过jquery获取后呈现。

def ajax_list(request):
    a = list(range(100))
    return HttpResponse(json.dumps(a), content_type='application/json')
 
def ajax_dict(request):
    name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
    return HttpResponse(json.dumps(name_dict), content_type='application/json')

4、模板中的jquery

$('#list').click(function(){
            $.getJSON('/ajax_list/',function(ret){
            //返回值 ret 在这里是一个列表
                for (var i = ret.length - 1; i >= 0; i--) {
                // 把 ret 的每一项显示在网页上
                $('#list_result').append(' ' + ret[i])
                };
            })
        })
 
      // 字典 dict
 $('#dict').click(function(){
            $.getJSON('/ajax_dict/',function(ret){
            //返回值 ret 在这里是一个字典
            $('#dict_result').append(ret.twz + '<br>');
            // 也可以用 ret['twz']
            })
        })

5、效果如下：

输入访问地址后的页面：

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