Haste makes waste

自强学堂-Django基础教程(4)-数据传递与Ajax

Posted on May 02, 2020 By lijun

无意中在网上发现了这个网站自强学堂(作者还是校友),上面整理的教程都很不错，正好适合刚学完DjangoBasic篇之后的扩展。本系列作为该自强学堂教程的笔记，为节省时间，与DjangoBasic部分重叠的话，会省略。

注意：

Django的标签导致Jekyll无法编译，都修改为了[%和[{，使用时需要替换将[替换为{！

参考 Django Ajax

有时候我们想把一个 list 或 dict等 JSON对象 传到网页的 javascript，用 JS 进行处理，比如用 js 将数据可视化显示到网页上。 有如下的两种方式:

  1. 直接在视图函数（views.py中的函数）中将 JSON对象 和网页其它内容一起传递到Django模板（一次性地渲染，还是同一次请求）。
  2. 页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。 比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

1. Django传递数据给JS

1.1 准备工作

  • 创建测试用app python manage.py startapp mytest。
  • 在project的setting文件的INSTALLED_APPS中加入新建的app。
  • project的urls中加入urls解析 from mytest.views import test 和 url(r'^test/', test, name='test'),
  • mytest app下 新建文件夹 \templates\mytest ，和 html文件(详细内容见下面)
  • views.py中添加test函数(详细内容见下面)

1.2 添加test的view

from __future__ import unicode_literals # 编码处理
from django.shortcuts import render
import json # 引入json
from django.http import HttpResponse # 后面的update的view需要

# Create your views here.
def test(request):
    List = ['自强学堂', '渲染Json到模板']
    Dict = {'site': '自强学堂', 'author': '涂伟忠'}

    return render(request, 'mytest/test.html', {
            'List': json.dumps(List),
            'Dict': json.dumps(Dict)
        })

视图函数中的字典或列表要用 json.dumps()处理。否则如果直接传递List和Dict的话，会出现Uncaught SyntaxError: Unexpected token ILLEGAL的错误。

1.3 添加html模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>jason</title>
</head>
<body>
<div id="list"> 学习 </div>
<div id='dict'></div>
<script type="text/javascript">
    //列表
    var List = ;

    //下面的代码把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 = ;
    console.log("--- 两种字典的取值方式  ---")
    console.log(Dict['site']);
    console.log(Dict.author);

    console.log("---  遍历字典  ---");
    for(i in Dict) {
        console.log(i + Dict[i]);//注意，此处 i 为键值
    }
</script>
</body>
</html>
  • 在模板上要加 safe 过滤器，var List = ;。
  • $('#list').prepend(List[0]);和$('#list').append(List[1]);，分别将List中的内容添加到已有的id为List的显示区域的前面和后面。
  • 后面的内容，介绍了在jquery中如何遍历List和Dict。

1.4 最终显示效果

显示如下的文字，将lsit中的元素，分别追加到了’#list’的头和尾：

自强学堂 学习 渲染Json到模板

和如下的chrome控制端输出

--- 遍历 List 方法 1 ---
0
1

--- 遍历 List 方法 2 ---
渲染Json到模板
自强学堂

--- 同时遍历索引和内容，使用 jQuery.each() 方法 ---
0
自强学堂
1
渲染Json到模板

--- 两种字典的取值方式  ---
自强学堂
涂伟忠

---  遍历字典  ---
site自强学堂
author涂伟忠

通过上面的哦方式，就将数据从view中传递给javascript了。

2. Django Ajax

2.1 basic-点击button部分更新文本

  • 修改上面test的view，render到一个新的html文件。

  • 新的html模板文件如下：

<body>
<form action="/update/" method="get">
    <p>result: <span id='result'></span></p>
    <button type="button" id='update'>update</button>
</form>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#update").click(function(){
        $.get("/update/", function(ret){
            $('#result').html(ret)
        })
      });
    });
</script>
</body>
  • html元素是<span>和<button>，<span>部分是空白，通过javascript进行更新。
  • 注意form中的语法，action指跳转到的url。

  • jquery的语法要专门学习。

  • project的url解析中添加 url(r'^update/', update, name='update'),，将处理交给update这个view。

  • 添加update的view
def update(request):
    r = HttpResponse("yes,it's updated")
    return r
  • 实现效果：
    • button按下前 result:
    • button按下后 result: yes,it's updated 只是更新了上面的这一部分。

image

2.2 接受输入计算，并部分更新结果

  • 类似上面，在project中添加 url(r'^add/((?:-|\d)+)/((?:-|\d)+)/$', add, name='add'),，将处理转交给add view。
  • 添加add view

def add(request, a, b):
    print("add")
    print(request)
    if request.is_ajax():
        ajax_string = 'ajax request: '
    else:
        ajax_string = 'not ajax request: '
    c = int(a) + int(b)
    r = HttpResponse(ajax_string + str(c))
    return r
  • 添加模板文件
<head>
<script>
function ajax_request()
{
var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("result").innerHTML=xmlhttp.responseText;
  }
}

var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
xmlhttp.open("GET", "/add/" + a + "/" + b + "/", true);
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlhttp.send();
}
</script>

</head><body>
<div id="myDiv"><h2>输入两个数求和</h2></div>
a: <input id="a"><br>
b: <input id="b"><br>
<button type="button" onclick="ajax_request()">求和</button>
<div>结果：<span id="result"></span></div>
</body>

上面是用原生javascript实现，有些繁琐。

注意javascript中跳转url的方式xmlhttp.open("GET", "/add/" + a + "/" + b + "/", true);

  • 实现效果:分别输入2和3，点击页面上的按钮，显示效果为:

image

  • 实现效果:直接访问 http://localhost:8000/add/2/3/，得到的页面结果为 not ajax request: 5，因为不是ajax访问。

2.3 传递数组/字典到网页，由JS处理并显示

  • view中添加如下
def ajax_list(request):
    a = ['1', '2']
    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')
  • url中添加如下解析
url(r'^ajax_list/$', ajax_list, name='ajax-list'),
url(r'^ajax_dict/$', ajax_dict, name='ajax-dict'),
  • 添加模板html文件
<!DOCTYPE html>
<html>
<body>
<div id="myDiv"><h2>输入两个数求和</h2></div>
a: <input id="a"><br>
b: <input id="b"><br>
<button type="button" onclick="ajax_request()">求和</button>
<div>结果：<span id="result"></span></div>

<div id="dict">Ajax 加载字典</div>
<p id="dict_result"></p>

<div id="list">Ajax 加载列表</div>
<p id="list_result"></p>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    function ajax_request()
    {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("result").innerHTML=xmlhttp.responseText;
      }
    }

    var a = document.getElementById("a").value;
    var b = document.getElementById("b").value;
    xmlhttp.open("GET", "/add/" + a + "/" + b + "/", true);
    xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xmlhttp.send();
    }

    $(document).ready(function(){
       // 列表 list
      $('#list').click(function(){
          $.getJSON("[% url '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("[% url 'ajax-dict' %}",function(ret){
              //返回值 ret 在这里是一个字典
              $('#dict_result').append(ret.twz + '<br>');
              // 也可以用 ret['twz']
          })
      })
    });

</script>
</body>
</html>
  • 实现效果如下：
    1. 黄色部分是局部更新的结果
    2. 点击[Ajax 加载字典]和[Ajax 加载列表]，会在下方不断增加

image

9. 参考

9.1 Django中的转义

Django的模板中会对HTML标签和JS等语法标签进行自动转义，原因显而易见，这样是为了安全。 但是有的时候我们可能不希望这些HTML元素被转义，比如我们做一个内容管理系统，后台添加的文章中是经过修饰的，这些修饰可能是通过一个类似于FCKeditor编辑加注了HTML修饰符的文本，如果自动转义的话显示的就是保护HTML标签的源文件。为了在Django中关闭HTML的自动转义有两种方式，如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。比如：

<p>这行代表会被自动转义</p>: 
<p>这行代表不会被自动转义</p>:

其中第二行我们关闭了Django的自动转义。 我们还可以通过[%autoescape off%}的方式关闭整段代码的自动转义，比如下面这样：

[% autoescape off %}
    Hello 
[% endautoescape %}