最近微信公众帐号要扩展做一个签到系统，签到结果在一个网页上实时更新，即页面局部刷新。我想用Ajax来实现，之前公众帐号是用的Django搭的，我查找了Django的官方文档，没有封装Ajax。网上有各种方法，眼花缭乱。之前在图书馆借了本书《Django Web 开发指南》里面，有Ajax的实例，但是旧版本的Django，代码没法运行，但是里面倒是提供一种方法——把数据翻译成JSON格式，然后按照我们的格式返回字符串结果，在写到HttpResponse里去。我借鉴了其中的方法。查了Django的官方文档，我修改了书中的代码，可以正常运行。自己也写了一个demo。

　　我的直接简单地在views.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秒执行一次 update() 函数，用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秒刷新一次更新内容，如下图

　　

　　Demo代码下载地址

　　http://files.cnblogs.com/stwzhong/AjaxTest.zip

　　《Django Web 开发指南》书上修改后代码下载地址

　　http://files.cnblogs.com/stwzhong/Liveblog.zip

　　

Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新的更多相关文章

  1. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

  2. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  5. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  6. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  7. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  8. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  9. Django1.7+JQuery+Ajax集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...

随机推荐

  1. 又谈F分布

    今天看到一篇不错的博文,有感,记录下来,相对来说讲到了本质,也很容易理解.https://www.cnblogs.com/think-and-do/p/6509239.html 首先,老生常谈,还是那 ...

  2. PLSQL PL/SQL Developer Oracle 使用技巧 常用设置 卡顿问题 病毒防范（ 附带：配置文件）

    相关工具版本: PL/SQL Developer: 9.0.4.1644 Oracle : Oracle Database 10g Enterprise Edition Release 10.2.0. ...

  3. 进程?线程?多线程?同步?异步?守护线程?非守护线程(用户线程)?线程的几种状态?多线程中的方法join()?

    1.进程?线程?多线程? 进程就是正在运行的程序,他是线程的集合. 线程是正在独立运行的一条执行路径. 多线程是为了提高程序的执行效率.2.同步?异步? 同步: 单线程 异步: 多线程 3.守护线程? ...

  4. 10 TCP限流技术

    TCP限流是因为让接收方充分接受完消息,保证数据安全,不会丢失 一.窗口机制介绍 发送端和接收端都拥有一个窗口,当发送端发送数据时,落进窗口的数据被发送,当接受端接受数据时,落进接收端窗口的数据将会被 ...

  5. vue-添加全局扩展方法

    1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/过滤器/过渡等,如 vue-touch 3.通过全局 mixin 方法添加一些组件选项,如: vue-ro ...

  6. sql 创建新表时的完成格式

    1 create table [dbo].[Customer] ( CustomerID int identity(1,1) not null, [Name] [nvarchar](50) null, ...

  7. RabbitMQ 功能

    学习完了rabbitmq总一下 RabbitMQ依赖的语言 erlang 第一它可以实现不同程序之间的程序信息储存交互,在易用性.扩展性.高可用性的方面不俗. rabbitmq相当于一个中间人,我们同 ...

  8. kubernetes之node资源紧缺时pod驱逐机制

    在系统硬件资源紧缺的情况下保证node的稳定性, 是kubelet需要解决的一个重要问题 1.驱逐策略 kubelet持续监控主机的资源使用情况, 一旦出现资源紧缺的迹象, kubelet就会主动终止 ...

  9. redis序列化和反序列化

    RedisTemplate中需要声明4种serializer,默认为“JdkSerializationRedisSerializer”: 1) keySerializer :对于普通K-V操作时,ke ...

  10. @Valid验证

    @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字段上添加用于充当校验条件的注解,如:@Min,如下代码(age属于User类中的属性): ...