最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新。我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax。网上有各种方法,眼花缭乱。之前在图书馆借了本书《Django Web 开发指南》里面,有Ajax的实例,但是旧版本的Django,代码没法运行,但是里面倒是提供一种方法——把数据翻译成JSON格式,然后按照我们的格式返回字符串结果,在写到HttpResponse里去。我借鉴了其中的方法。查了Django的官方文档,我修改了书中的代码,可以正常运行。自己也写了一个demo。
我的直接简单地在view.py把数据存在一个list中,然后用JSON格式储存,写到HttpResponse中
from django.http import HttpResponse
from django.shortcuts import render_to_response
import json
def data(request, id):
rlist = [['Jack', 'Chinese'], ['Mike', 'English'], ['Bob', 'Math'], ['Frank', 'Art'], ['Lucy', 'Music']]
rlist2 = []
rlist2.append({"name" : rlist[int(id)][0], "subject" : rlist[int(id)][1]})
rjson = json.dumps(rlist2)
response = HttpResponse()
response['Content-Type'] = "text/javascript"
response.write(rjson)
return response
def update(request):
return render_to_response('update.html')
url.py中有两个地址,一个是展示页面,一个是数据保存地址
from django.conf.urls import patterns, url
from AjaxTest.views import data, update
urlpatterns = patterns('',
url(r'^data/(?P<id>\d+)/$', data),
url(r'^update/', update)
)
访问http://127.0.0.1:8000/data/id/, id数字,可获取JSON数据
这一步很关键,接下来我们编写和这个API视图交互Javascript,并用它来响应页面。我用jQuery中的ajax,每隔3秒执行一次 udate() 函数,用jQuery的 getJSON 方法,发送URL请求,解析结果,这样完成Ajax,Javascript代码如下
function update(id) { $.getJSON("/data/" + id + "/",function(data) { $.each(data, function(){ $("#content").html('<p>' + this.name + ' is a ' + this.subject + ' teacher.</p>'); }); }); } function timeDown(limit, i) { limit--; if (i > 4) { i = 0; } if (limit < 0) { limit = 3; update(i); i++; } $('#time').text(limit + '秒后刷新'); setTimeout(function() { timeDown(limit, i); }, 1000) } $(document).ready(function() { timeDown(3, 0) })
html页面代码
<html> <head> <title>Ajax Test</title> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" language="javascript"> function update(id) { $.getJSON("/data/" + id + "/",function(data) { $.each(data, function(){ $("#content").html('<p>' + this.name + ' is a ' + this.subject + ' teacher.</p>'); }); }); } function timeDown(limit, i) { limit--; if (i > 4) { i = 0; } if (limit < 0) { limit = 3; update(i); i++; } $('#time').text(limit + '秒后刷新'); setTimeout(function() { timeDown(limit, i); }, 1000) } $(document).ready(function() { timeDown(3, 0) }) </script> </head> <body> <h1>Ajax Test</h1> <p id="time"></p> <div id="content"></div> </body> </html>
运行服务器,访问http://127.0.0.1:8000/update/,每隔3秒刷新一次更新内容,如下图