ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量
最近希望實現一個頁面局部刷新的功能，于是開始查閱ajax資料。幸好現在ajax很多功能都封裝在jQuery這個庫里面，我們可以很方便去調用。通過學習幾個簡單的小例子，可以實現簡單的前端代碼更新，還有重新加載一個文件內容到前端都可以實現。但是Django的前端template代碼里面有變量，始終無法實現想要的功能。注意：此處的實現方法屏蔽了Django自帶的"django.middleware.csrf.CsrfViewMiddleware" 這個中間件，直接在生產中實現會有風險隱患。
jQuery安裝下載到本地或者直接引用：
這是我的一段前端代碼，比較簡單，有django基礎的應該都可以看懂，就是去遍歷reply_message里面所有的對象，然后比較parent_id_id值，并且打印。不太清楚語法的可以去看下Django里面的模板教程。
{% for dic_reply in reply_message %}
{% ifequal dic_reply.parent_id_id dic.id %}
回復人：{{dic_reply.user_name}} 時間： {{dic_reply.time}}
內容：{{dic_reply.content}}
{% 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代碼：
$(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
});
});
幾點說明的：
1.responseData就是后臺傳過來的json類型數據，即我們構造的payload，有點python里面字典數據類型，實際上通過json.dump方法傳遞后已經是一個json數據類型。這樣方便前端用json方法訪問。而responseData.content_html就是我們要替換實際內容。關于json數據類型具體介紹可以上W3c去查閱。
2. 調式前端問題可以通過firebug，fiddler等工具調試。
django 使用jquery ajax post數據問題
django 開啟了CSRF功能導致jquery ajax post數據報錯 解決方法在post數據里引入csrfmiddlewaretoken: '{{ csrf_token }}'},同時需要在f ...
框架----Django之Ajax全套實例(原生AJAX，jQuery Ajax，“偽”AJAX，JSONP，CORS)
一.原生AJAX,jQuery Ajax,“偽”AJAX,JSONP 1. 瀏覽器訪問 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...
django之使用jquery完成ajax
使用Ajax 使用視圖通過上下文向模板中傳遞數據,需要先加載完成模板的靜態頁面,再執行模型代碼,生成最張的html,返回給瀏覽器,這個過程將頁面與數據集成到了一起,擴展性差 改進方案:通過ajax的方 ...
[Django]網頁中利用ajax實現批量導入數據功能
url.py代碼: url(r'^workimport/$', 'keywork.views.import_keywork', name='import_keywork') view.py代碼: fr ...
ajax向Django前后端提交請求和CSRF跨站請求偽造
1.ajax登錄示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...
Django(十三)ajax 與 Bootstrap,font-awesome
prop,attr,val font-awesome:字體,圖標庫 對話框添加,刪除,修改: 添加: Ajax偷偷向后臺發請求: 1. 下載引入jQuery 2. $.ajax({ url: '/ad ...
Django實戰(16)：Django+jquery
現在我們有了一個使用json格式的RESTful API,可以實現這樣的功能了:為了避免在產品列表和購物車之間來回切換,需要在產品列表界面顯示購物車,并且通過ajax的方式不刷新界面就更新購物車的顯示 ...
Python自動化運維 - Django(二)Ajax基礎 - 自定義分頁
Ajax基礎 AJAX 不是新的編程語言,而是一種使用現有標準的新方法. AJAX 是與服務器交換數據并更新部分網頁的藝術,在不重新加載整個頁面的情況下. 什么是Ajax AJAX = 異步 Java ...
隨機推薦
addEventListener和attachEvent的區別
addEventListener共有3個參數,如下所示:element.addEventListener(type,listener,useCapture); 參數 參數說明 element 要綁定事 ...
滿足NABC的軟件創意
創意——幾個簡單的想法 ——崔海營 創意一:?????????????? 大學生自行車租借一點通 隨著大學生人數的不斷增多以及大學生活的空閑時間十分充裕,許多同學十分樂意到一些附近的景點去游玩或者燒烤 ...
mysql批量替換單字段
update 表名 set 字段名 =? replace(字段名,'被替換內容','要替換內容'); 指定有人查這個!!!
第六十三篇、runtime實現歸解檔
#import #import @implementation HDFArchiveModel - (voi ...
Openjudge-計算概論(A)-雞尾酒療法
描述: 雞尾酒療法,原指“高效抗逆轉錄病毒治療”(HAART),由美籍華裔科學家何大一于1996年提出,是通過三種或三種以上的抗病毒藥物聯合使用來治療艾 滋病.該療法的應用可以減少單一用藥產生的抗藥性 ...
基于Angularjs實現圖片上傳和下載
根據ng-file-uoload實現文件上傳和下載實現 網上down下來ng-file-uoload.js,在項目中記得引入服務哦. 示例代碼: FileUploaderCtrl.$inject = ...
P2602 [ZJOI2010]數字計數
https://www.luogu.org/problemnew/show/P2602 數位dp #include using namespace std; ...
LSTM-自然語言建模
說到自然語言,我就會想到樸素貝葉斯,貝葉斯核心就是條件概率,而且大多數自然語言處理的思想也就是條件概率. 所以我用預測一個句子出現的概率為例,闡述一下自然語言處理的思想. 處理思想-概率 句子,就是單 ...
tms web core 里面調用pascal 過程。
procedure show(s:string);begin? showmessage(s);end; procedure TForm3.WebButton1Click(Sender: TObject ...
bzoj 1232 [Usaco2008Nov]安慰奶牛cheer
思路:看出跟dfs的順序有關就很好寫了, 對于一棵樹來說確定了起點那么訪問點的順序就是dfs序,每個點經過 其度數遍,每條邊經過2邊, 那么我們將邊的權值×2加上兩端點的權值跑最小生成樹,最后加上一個 ...
總結
以上是生活随笔為你收集整理的ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax异步查询demo,ASP.NET
- 下一篇： opc ua服务器大批量修改,opc u