django ajax

最新推荐文章于 2021-08-06 09:36:02 发布

thousand24

最新推荐文章于 2021-08-06 09:36:02 发布

阅读量294

点赞数

分类专栏： django 文章标签： django-ajax

本文链接：https://blog.csdn.net/thousand24/article/details/71374473

版权

django 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Django传递数据给JS

把一个list或者dict传递给javascript,处理后显示到网页，比如要用js进行可视化的数据。
这里讲述两种方法。

一，也买那加载完成后，在页面上操作，在页面通过ajax请求得到新的数据（再向服务器发送一次请求）并显示在页面上，这种情况适用于页面不刷新的情况，动态加载一些内容。

    views.py
from __future__ import unicode_literals
from django.shortcuts import render

def 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_literals
import json
from django.shortcuts import render

def 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'}