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

最新推荐文章于 2021-08-06 12:12:02 发布

anpaqi6194

最新推荐文章于 2021-08-06 12:12:02 发布

阅读量242

点赞数

文章标签： python 前端 json ViewUI

原文链接：http://www.cnblogs.com/xiaoqu/p/3224173.html

版权

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

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

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

这是我的一段前端代码，比较简单，有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等工具调试。

转载于:https://www.cnblogs.com/xiaoqu/p/3224173.html

anpaqi6194

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Django 1.5] jQuery/Ajax 在Django使用，如何更新模板里里变量

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

扫一扫