django与jquery数据传递过程

最新推荐文章于 2024-04-03 15:40:02 发布

cmdangdang

最新推荐文章于 2024-04-03 15:40:02 发布

阅读量7.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cmdangdang/article/details/52337018

本文介绍了在Django框架下，如何结合jQuery实现不刷新页面的多次数据请求。首先，Django通过URL请求views函数并渲染模板。然后，通过在URL.py中定义新的URL，与jQuery配合，实现AJAX请求。jQuery的src可以使用本地或CDN资源，并且需要考虑CSRF认证。在views.py中定义的ajax_list和ajax_dict视图函数返回JSON数据，页面上的jQuery脚本接收到这些数据后进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

初次请求数据：

通常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、效果如下：

输入访问地址后的页面：