最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料。幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用。通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重新加载一个文件内容到前端都可以实现。但是Django的前端template代码里面有变量,始终无法实现想要的功能。注意:此处的实现方法屏蔽了Django自带的"django.middleware.csrf.CsrfViewMiddleware" 这个中间件,直接在生产中实现会有风险隐患。

jQuery安装下载到本地或者直接引用:

  1. <head>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
  3. </script>
  4. </head>
  1. 这是我的一段前端代码,比较简单,有django基础的应该都可以看懂,就是去遍历reply_message里面所有的对象,然后比较parent_id_id值,并且打印。不太清楚语法的可以去看下Django里面的模板教程。
  1. <div id = "reply_form" style="background-color: #E8E8E8">
  2. {% for dic_reply in reply_message %}
  3. {% ifequal dic_reply.parent_id_id dic.id %}
  4. <p> <b>回复人:</b>{{dic_reply.user_name}} <b>时间:</b> {{dic_reply.time}} </p>
  5. <p> <b>内容:</b>{{dic_reply.content}} </p>
  6. {% endifequal %}
  7. {% endfor %}

因为Django自带的框架还没有局部加载html页面的方法,而Ajax这个正好专门做这个事情。如果django只是通过HttpResponse传递一个变量,jQuery无法局部加载和template变量也无法渲染template模板

后来想到两思路:

1. 后台直接构成一个完整html格式内容,传给前端直接替换。

2.后台只传变量到前端,通过js方法构成想要的html格式内容,再做替换。

其实两种方法区别就是一种在后台完成html内容构造,一种在前端构造。试验了很多次,没能成功,最后在高手指点下终于成功试出方法1。基本思路还是在后台先生成正确的html格式代码,再通过AJAX方法发到前端替换前端代码。

  1. if request.is_ajax(): //判断request请求是否是Ajax类型的
  2. t = get_template('reply_form.html') //获取模板内容
  3. content_html = t.render(Context({'reply_message':ReplyMessage_dic})) //渲染模板生成想要的全部局部html内容,而不是某一个变量
  4. payload = {
  5. 'content_html': content_html,
  6. 'success': True} //构造json类型数据,以方便前端处理
  7. return HttpResponse(json.dumps(payload), //这个地方最好保证用json的方法传送数据,否则会出现意想不到的错误
  8. mimetype="application/json") //用json类型返回数据到前端

这地方要注意的问题是渲染模板不能用render_to_response的方法,否则就直接返回到前端了。返回HttpResponse要加mimetype="application/json"参数,否则可能会出现前端页面无法通过json的方法获取到对应的值

前端JS代码:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('#reply_submit').submit(function() { // catch the form's submit event
  4. $.ajax({ // create an AJAX call...
  5. data: $(this).serialize(), // get the form data
  6. type: $(this).attr('method'), // GET or POST
  7. url: $(this).attr('action'), // the file to call; send the data to server
  8. success:function(responseData) { // on success.. get respose from the server
  9. $('#reply_form').html(responseData.content_html); // update the DIV with response
  10. }
  11. });
  12. return false; //avoid submitting the content to server directly
  13. });
  14. });
  15. </script>

几点说明的:

1.responseData就是后台传过来的json类型数据,即我们构造的payload,有点python里面字典数据类型,实际上通过json.dump方法传递后已经是一个json数据类型。这样方便前端用json方法访问。而responseData.content_html就是我们要替换实际内容。关于json数据类型具体介绍可以上W3c去查阅。

2. 调式前端问题可以通过firebug,fiddler等工具调试。

[Django 1.5] jQuery/Ajax 在Django使用 ,如何更新模板里里变量的更多相关文章

  1. Django基础五之Ajax

    Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...

  2. django 使用jquery ajax post数据问题

    django 开启了CSRF功能导致jquery ajax post数据报错 解决方法在post数据里引入csrfmiddlewaretoken: '{{ csrf_token }}'},同时需要在f ...

  3. 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  4. django之使用jquery完成ajax

    使用Ajax 使用视图通过上下文向模板中传递数据,需要先加载完成模板的静态页面,再执行模型代码,生成最张的html,返回给浏览器,这个过程将页面与数据集成到了一起,扩展性差 改进方案:通过ajax的方 ...

  5. [Django]网页中利用ajax实现批量导入数据功能

    url.py代码: url(r'^workimport/$', 'keywork.views.import_keywork', name='import_keywork') view.py代码: fr ...

  6. ajax向Django前后端提交请求和CSRF跨站请求伪造

    1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...

  7. Django(十三)ajax 与 Bootstrap,font-awesome

    prop,attr,val font-awesome:字体,图标库 对话框添加,删除,修改: 添加: Ajax偷偷向后台发请求: 1. 下载引入jQuery 2. $.ajax({ url: '/ad ...

  8. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  9. Django实战(16):Django+jquery

    现在我们有了一个使用json格式的RESTful API,可以实现这样的功能了:为了避免在产品列表和购物车之间来回切换,需要在产品列表界面显示购物车,并且通过ajax的方式不刷新界面就更新购物车的显示 ...

随机推荐

  1. oc语言--BLOCK和协议

    一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相似性:(1)可以保存代码(2 ...

  2. Mac OS X用户,使用homebrew安装,FreeBSD也可以

    qtkeychain 这是编译和运行软件必须的库.各平台都可以编译安装.对于Mac OS X用户,使用homebrew安装: brew install qt5keychain (旧版本的Mac OS ...

  3. setAdapter(adapter)空指针nullPointer 解决办法

    setAdapter(adapter)空指针nullPointer 解决办法 (2014-06-13 10:01:23) 转载▼ 标签: 旅游 分类: Android开发 如果setAdapter报空 ...

  4. md5sum.c, md5.c, md5.h

    md5sum.c #include <stdio.h> #include <stdlib.h> #include "md5.h" #pragma warni ...

  5. ###Android 断点调试和高级调试###

    转自:http://www.2cto.com/kf/201506/408358.html 有人说Android 的调试是最坑的,那我只能说是你不会用而已,我可以说Android Studio的调试是我 ...

  6. CentOS 6.5 CodeBlocks::wxWidgets安装与配置

    第一步, #yum install  codeblocks codeblocks-contrib codeblocks-devel 第二步,到官方下载源码包,我下的是wxX11的3.0版的. #tar ...

  7. 理解*ptr++

    这是C语言中指针的基本用法之一,我们先来看一个小例子.下面是代码: int main(void) { char *p = "Hello"; while(*p++) printf(& ...

  8. python hook监听事件

    python hook监听事件 作者:vpoet mail:vpoet_sir@163.com # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ ...

  9. php编程提高执行效率技巧

    PHP开发提高效率技巧     0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作 ...

  10. catkin_simple 的使用

    Catkin simple 可用于规范catkin package, 并简化CMakeLists  Dependencies are just listed once as build-depend  ...