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

时间 2019-12-01

标签 django 1.5 jquery ajax 使用如何更新模板里里变量栏目 Python 繁體版

原文原文链接

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

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模板html

后来想到两思路:

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

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

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

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的方法获取到对应的值jquery

前端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>

几点说明的：ajax

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

2. 调式前端问题能够经过firebug，fiddler等工具调试。json

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

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

后来想到两思路:

前端JS代码：

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