最近希望實現一個頁面局部刷新的功能，於是開始查閱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等工具調試。