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

最近希望实现一个页面局部刷新的功能，于是开始查阅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里面的模板教程。

  <div id = "reply_form"  style="background-color:     #E8E8E8">

  {% for dic_reply in reply_message %}

  {% ifequal dic_reply.parent_id_id dic.id %}

          <p> <b>回复人：</b>{{dic_reply.user_name}}   <b>时间：</b> {{dic_reply.time}} </p>

          <p> <b>内容：</b>{{dic_reply.content}}  </p>

  {% 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代码：

   <script type="text/javascript">

       $(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

          });

      });

  </script>

几点说明的：

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

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