Django1.6+jQuery Ajax + JSON 实现页面局部实时刷新

最新推荐文章于 2023-05-12 15:39:02 发布

huangyimo

最新推荐文章于 2023-05-12 15:39:02 发布

阅读量7.6k

点赞数 1

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

django 专栏收录该内容

12 篇文章

订阅专栏

最近微信公众帐号要扩展做一个签到系统，签到结果在一个网页上实时更新，即页面局部刷新。我想用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秒刷新一次更新内容，如下图