最近微信公眾帳號要擴展做一個簽到系統，簽到結果在一個網頁上實時更新，即頁面局部刷新。我想用Ajax來實現，之前公眾帳號是用的Django搭的，我查找了Django的官方文檔，沒有封裝Ajax。網上有各種方法，眼花繚亂。之前在圖書館借了本書《Django Web 開發指南》里面，有Ajax的實例，但是舊版本的Django，代碼沒法運行，但是里面倒是提供一種方法——把數據翻譯成JSON格式，然后按照我們的格式返回字符串結果，在寫到HttpResponse里去。我借鑒了其中的方法。查了Django的官方文檔，我修改了書中的代碼，可以正常運行。自己也寫了一個demo。
我的直接簡單地在views.py把數據存在一個list中，然后用JSON格式儲存，寫到HttpResponse中
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中有兩個地址，一個是展示頁面，一個是數據保存地址
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數據
這一步很關鍵，接下來我們編寫和這個API視圖交互Javascript，並用它來響應頁面。我用jQuery中的ajax，每隔3秒執行一次 update() 函數，用jQuery的 getJSON 方法，發送URL請求，解析結果，這樣完成Ajax，Javascript代碼如下
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頁面代碼
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>
運行服務器，訪問http://127.0.0.1:8000/update/，每隔3秒刷新一次更新內容，如下圖
Demo代碼下載地址
http://files.cnblogs.com/stwzhong/AjaxTest.zip
《Django Web 開發指南》書上修改后代碼下載地址
http://files.cnblogs.com/stwzhong/Liveblog.zip