最近希望實現(xiàn)一個頁面局部刷新的功能，于是開始查閱ajax資料。幸好現(xiàn)在ajax很多功能都封裝在jQuery這個庫里面，我們可以很方便去調(diào)用。通過學(xué)習(xí)幾個簡單的小例子，可以實現(xiàn)簡單的前端代碼更新，還有重新加載一個文件內(nèi)容到前端都可以實現(xiàn)。但是Django的前端template代碼里面有變量，始終無法實現(xiàn)想要的功能。注意：此處的實現(xiàn)方法屏蔽了Django自帶的"django.middleware.csrf.CsrfViewMiddleware" 這個中間件，直接在生產(chǎn)中實現(xiàn)會有風(fēng)險隱患。

jQuery安裝下載到本地或者直接引用：

這是我的一段前端代碼，比較簡單，有django基礎(chǔ)的應(yīng)該都可以看懂，就是去遍歷reply_message里面所有的對象，然后比較parent_id_id值，并且打印。不太清楚語法的可以去看下Django里面的模板教程。

{% for dic_reply in reply_message %}

{% ifequal dic_reply.parent_id_id dic.id %}

回復(fù)人：{{dic_reply.user_name}} 時間： {{dic_reply.time}}

內(nèi)容：{{dic_reply.content}}

{% endifequal %}

{% endfor %}

因為Django自帶的框架還沒有局部加載html頁面的方法，而Ajax這個正好專門做這個事情。如果django只是通過HttpResponse傳遞一個變量，jQuery無法局部加載和template變量也無法渲染template模板

后來想到兩思路:

1. 后臺直接構(gòu)成一個完整html格式內(nèi)容，傳給前端直接替換。

2.后臺只傳變量到前端，通過js方法構(gòu)成想要的html格式內(nèi)容，再做替換。

其實兩種方法區(qū)別就是一種在后臺完成html內(nèi)容構(gòu)造，一種在前端構(gòu)造。試驗了很多次，沒能成功，最后在高手指點下終于成功試出方法1。基本思路還是在后臺先生成正確的html格式代碼，再通過AJAX方法發(fā)到前端替換前端代碼。

if request.is_ajax(): //判斷request請求是否是Ajax類型的

t = get_template('reply_form.html') //獲取模板內(nèi)容

content_html = t.render(Context({'reply_message':ReplyMessage_dic})) //渲染模板生成想要的全部局部html內(nèi)容，而不是某一個變量

payload = {

'content_html': content_html,

'success': True} //構(gòu)造json類型數(shù)據(jù)，以方便前端處理

return HttpResponse(json.dumps(payload), //這個地方最好保證用json的方法傳送數(shù)據(jù)，否則會出現(xiàn)意想不到的錯誤

mimetype="application/json") //用json類型返回數(shù)據(jù)到前端

這地方要注意的問題是渲染模板不能用render_to_response的方法，否則就直接返回到前端了。返回HttpResponse要加mimetype="application/json"參數(shù)，否則可能會出現(xiàn)前端頁面無法通過json的方法獲取到對應(yīng)的值

前端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類型數(shù)據(jù)，即我們構(gòu)造的payload，有點python里面字典數(shù)據(jù)類型，實際上通過json.dump方法傳遞后已經(jīng)是一個json數(shù)據(jù)類型。這樣方便前端用json方法訪問。而responseData.content_html就是我們要替換實際內(nèi)容。關(guān)于json數(shù)據(jù)類型具體介紹可以上W3c去查閱。

2. 調(diào)式前端問題可以通過firebug，fiddler等工具調(diào)試。

django 使用jquery ajax post數(shù)據(jù)問題

django 開啟了CSRF功能導(dǎo)致jquery ajax post數(shù)據(jù)報錯 解決方法在post數(shù)據(jù)里引入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 使用視圖通過上下文向模板中傳遞數(shù)據(jù),需要先加載完成模板的靜態(tài)頁面,再執(zhí)行模型代碼,生成最張的html,返回給瀏覽器,這個過程將頁面與數(shù)據(jù)集成到了一起,擴展性差 改進(jìn)方案:通過ajax的方 ...

[Django]網(wǎng)頁中利用ajax實現(xiàn)批量導(dǎo)入數(shù)據(jù)功能

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:字體,圖標(biāo)庫 對話框添加,刪除,修改: 添加: Ajax偷偷向后臺發(fā)請求: 1. 下載引入jQuery 2. $.ajax({ url: '/ad ...

Django實戰(zhàn)(16)：Django+jquery

現(xiàn)在我們有了一個使用json格式的RESTful API,可以實現(xiàn)這樣的功能了:為了避免在產(chǎn)品列表和購物車之間來回切換,需要在產(chǎn)品列表界面顯示購物車,并且通過ajax的方式不刷新界面就更新購物車的顯示 ...

Python自動化運維 - Django(二)Ajax基礎(chǔ) - 自定義分頁

Ajax基礎(chǔ) AJAX 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法. AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù),在不重新加載整個頁面的情況下. 什么是Ajax AJAX = 異步 Java ...

隨機推薦

addEventListener和attachEvent的區(qū)別

addEventListener共有3個參數(shù),如下所示:element.addEventListener(type,listener,useCapture); 參數(shù) 參數(shù)說明 element 要綁定事 ...

滿足NABC的軟件創(chuàng)意

創(chuàng)意——幾個簡單的想法 ——崔海營 創(chuàng)意一:?????????????? 大學(xué)生自行車租借一點通 隨著大學(xué)生人數(shù)的不斷增多以及大學(xué)生活的空閑時間十分充裕,許多同學(xué)十分樂意到一些附近的景點去游玩或者燒烤 ...

mysql批量替換單字段

update 表名 set 字段名 =? replace(字段名,'被替換內(nèi)容','要替換內(nèi)容'); 指定有人查這個!!!

第六十三篇、runtime實現(xiàn)歸解檔

#import #import @implementation HDFArchiveModel - (voi ...

Openjudge-計算概論(A)-雞尾酒療法

描述: 雞尾酒療法,原指“高效抗逆轉(zhuǎn)錄病毒治療”(HAART),由美籍華裔科學(xué)家何大一于1996年提出,是通過三種或三種以上的抗病毒藥物聯(lián)合使用來治療艾 滋病.該療法的應(yīng)用可以減少單一用藥產(chǎn)生的抗藥性 ...

基于Angularjs實現(xiàn)圖片上傳和下載

根據(jù)ng-file-uoload實現(xiàn)文件上傳和下載實現(xiàn) 網(wǎng)上down下來ng-file-uoload.js,在項目中記得引入服務(wù)哦. 示例代碼: FileUploaderCtrl.$inject = ...

P2602 [ZJOI2010]數(shù)字計數(shù)

https://www.luogu.org/problemnew/show/P2602 數(shù)位dp #include using namespace std; ...

LSTM-自然語言建模

說到自然語言,我就會想到樸素貝葉斯,貝葉斯核心就是條件概率,而且大多數(shù)自然語言處理的思想也就是條件概率. 所以我用預(yù)測一個句子出現(xiàn)的概率為例,闡述一下自然語言處理的思想. 處理思想-概率 句子,就是單 ...

tms web core 里面調(diào)用pascal 過程。

procedure show(s:string);begin? showmessage(s);end; procedure TForm3.WebButton1Click(Sender: TObject ...

bzoj 1232 [Usaco2008Nov]安慰奶牛cheer

思路:看出跟dfs的順序有關(guān)就很好寫了, 對于一棵樹來說確定了起點那么訪問點的順序就是dfs序,每個點經(jīng)過 其度數(shù)遍,每條邊經(jīng)過2邊, 那么我們將邊的權(quán)值×2加上兩端點的權(quán)值跑最小生成樹,最后加上一個 ...

總結(jié)

以上是生活随笔為你收集整理的ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。