最近希望实现一个页面局部刷新的功能，于是开始查阅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等工具调试。