ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量

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

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

这是我的一段前端代码，比较简单，有django基础的应该都可以看懂，就是去遍历reply_message里面所有的对象，然后比较parent_id_id值，并且打印。不太清楚语法的可以去看下Django里面的模板教程。

{% for dic_reply in reply_message %}

{% ifequal dic_reply.parent_id_id dic.id %}

回复人：{{dic_reply.user_name}} 时间： {{dic_reply.time}}

内容：{{dic_reply.content}}

{% endifequal %}

{% endfor %}

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

后来想到两思路:

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

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

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

if request.is_ajax(): //判断request请求是否是Ajax类型的

t = get_template('reply_form.html') //获取模板内容

content_html = t.render(Context({'reply_message':ReplyMessage_dic})) //渲染模板生成想要的全部局部html内容，而不是某一个变量

payload = {

'content_html': content_html,

'success': True} //构造json类型数据，以方便前端处理

return HttpResponse(json.dumps(payload), //这个地方最好保证用json的方法传送数据，否则会出现意想不到的错误

mimetype="application/json") //用json类型返回数据到前端

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

前端JS代码：

$(document).ready(function() {

$('#reply_submit').submit(function() { // catch the form's submit event

$.ajax({ // create an AJAX call...

data: $(this).serialize(), // get the form data

type: $(this).attr('method'), // GET or POST

url: $(this).attr('action'), // the file to call; send the data to server

success:function(responseData) { // on success.. get respose from the server

$('#reply_form').html(responseData.content_html); // update the DIV with response

}

});

return false; //avoid submitting the content to server directly

});

});

几点说明的：

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

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

django 使用jquery ajax post数据问题

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

框架----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_ ...

django之使用jquery完成ajax

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

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

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

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

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

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

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

Django实战(16)：Django+jquery

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

Python自动化运维 - Django(二)Ajax基础 - 自定义分页

Ajax基础 AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 什么是Ajax AJAX = 异步 Java ...

随机推荐

addEventListener和attachEvent的区别

addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

满足NABC的软件创意

创意——几个简单的想法 ——崔海营 创意一:               大学生自行车租借一点通 随着大学生人数的不断增多以及大学生活的空闲时间十分充裕,许多同学十分乐意到一些附近的景点去游玩或者烧烤 ...

mysql批量替换单字段

update 表名 set 字段名 =  replace(字段名,'被替换内容','要替换内容'); 指定有人查这个!!!

第六十三篇、runtime实现归解档

#import #import @implementation HDFArchiveModel - (voi ...

Openjudge-计算概论(A)-鸡尾酒疗法

描述: 鸡尾酒疗法,原指“高效抗逆转录病毒治疗”(HAART),由美籍华裔科学家何大一于1996年提出,是通过三种或三种以上的抗病毒药物联合使用来治疗艾 滋病.该疗法的应用可以减少单一用药产生的抗药性 ...

基于Angularjs实现图片上传和下载

根据ng-file-uoload实现文件上传和下载实现 网上down下来ng-file-uoload.js,在项目中记得引入服务哦. 示例代码: FileUploaderCtrl.$inject = ...

P2602 [ZJOI2010]数字计数

https://www.luogu.org/problemnew/show/P2602 数位dp #include using namespace std; ...

LSTM-自然语言建模

说到自然语言,我就会想到朴素贝叶斯,贝叶斯核心就是条件概率,而且大多数自然语言处理的思想也就是条件概率. 所以我用预测一个句子出现的概率为例,阐述一下自然语言处理的思想. 处理思想-概率 句子,就是单 ...

tms web core 里面调用pascal 过程。

procedure show(s:string);begin  showmessage(s);end; procedure TForm3.WebButton1Click(Sender: TObject ...

bzoj 1232 [Usaco2008Nov]安慰奶牛cheer

思路:看出跟dfs的顺序有关就很好写了, 对于一棵树来说确定了起点那么访问点的顺序就是dfs序,每个点经过 其度数遍,每条边经过2边, 那么我们将边的权值×2加上两端点的权值跑最小生成树,最后加上一个 ...