Django1.6 + jQuery Ajax + JSON 實現頁面局部實時刷新

時間 2019-12-07

標籤 django1.6 django jquery ajax json 實現頁面局部實時刷新欄目 Python 简体版

原文原文鏈接

　　最近微信公衆賬號要擴展作一個簽到系統，簽到結果在一個網頁上實時更新，即頁面局部刷新。我想用Ajax來實現，以前公衆賬號是用的Django搭的，我查找了Django的官方文檔，沒有封裝Ajax。網上有各類方法，眼花繚亂。以前在圖書館借了本書《Django Web 開發指南》裏面，有Ajax的實例，可是舊版本的Django，代碼無法運行，可是裏面卻是提供一種方法——把數據翻譯成JSON格式，而後按照咱們的格式返回字符串結果，在寫到HttpResponse裏去。我借鑑了其中的方法。查了Django的官方文檔，我修改了書中的代碼，能夠正常運行。本身也寫了一個demo。javascript

　　個人直接簡單地在views.py把數據存在一個list中，而後用JSON格式儲存，寫到HttpResponse中css

 1 from django.http import HttpResponse
 2 from django.shortcuts import render_to_response
 3 import json
 4 
 5 def data(request, id):
 6     rlist = [['Jack', 'Chinese'], ['Mike', 'English'], ['Bob', 'Math'], ['Frank', 'Art'], ['Lucy', 'Music']]
 7     rlist2 = []
 8     rlist2.append({"name" : rlist[int(id)][0], "subject" : rlist[int(id)][1]})
 9     rjson = json.dumps(rlist2)
10     response = HttpResponse()
11     response['Content-Type'] = "text/javascript"
12     response.write(rjson)
13     return response
14     
15 def update(request):
16     return render_to_response('update.html')

　　　url.py中有兩個地址，一個是展現頁面，一個是數據保存地址html

1 from django.conf.urls import patterns,  url
2 from AjaxTest.views import data, update
3 
4 urlpatterns = patterns('',
5     url(r'^data/(?P<id>\d+)/$', data),
6     url(r'^update/', update)
7 )

　　訪問http://127.0.0.1:8000/data/id/, id是數字，可獲取對應JSON數據java

　　這一步很關鍵，接下來咱們編寫和這個API視圖交互Javascript，並用它來響應頁面。我用jQuery中的ajax，每隔3秒執行一次 update() 函數，用jQuery的 getJSON 方法，發送URL請求，解析結果，這樣完成Ajax，Javascript代碼以下jquery

 1 function update(id) {
 2    $.getJSON("/data/" + id + "/",function(data) {
 3       $.each(data, function(){
 4          $("#content").html('<p>' + this.name + ' is a ' + this.subject + ' teacher.</p>');
 5          });
 6    });
 7 }
 8 function timeDown(limit, i) {
 9    limit--;
10    if (i > 4) {
11        i = 0;
12    }
13    if (limit < 0) {
14        limit = 3;
15        update(i);
16        i++;
17    }
18    $('#time').text(limit + '秒後刷新');
19        setTimeout(function() {
20            timeDown(limit, i);
21             }, 1000)
22 }
23            
24 $(document).ready(function() {
25    timeDown(3, 0)
26 })

　　html頁面代碼ajax

 1 <html>
 2  <head>
 3    <title>Ajax Test</title>
 4    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
 5    <script type="text/javascript" language="javascript">
 6            function update(id) {
 7                $.getJSON("/data/" + id + "/",function(data) {
 8                 $.each(data, function(){
 9                     $("#content").html('<p>' + this.name + ' is a ' + this.subject + ' teacher.</p>');
10                 });
11                });
12            }
13            function timeDown(limit, i) {
14                limit--;
15                if (i > 4) {
16                    i = 0;
17                }
18                if (limit < 0) {
19                    limit = 3;
20                    update(i);
21                    i++;
22                }
23                $('#time').text(limit + '秒後刷新');
24                setTimeout(function() {
25                    timeDown(limit, i);
26                }, 1000)
27            }
28            
29            $(document).ready(function() {
30                timeDown(3, 0)
31         })
32    </script>
33  </head>
34  <body>
35    <h1>Ajax Test</h1>
36    <p id="time"></p>
37    <div id="content"></div> 
38  </body>
39 </html>