[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