Unity 在MVC上的應(yīng)用(擴(kuò)展篇:JQuery AJAX)
2011-06-16 19:21 bugfly 閱讀(3240) 評(píng)論(20) 收藏 舉報(bào)系列目錄
Unity 在MVC上的應(yīng)用(中:Repository)
Unity 在MVC上的應(yīng)用(擴(kuò)展篇:JQuery AJAX)
Unity 在MVC上的應(yīng)用(擴(kuò)展篇:事務(wù)控制-前篇ActionFilter)
Unity 在MVC上的應(yīng)用(擴(kuò)展篇:事務(wù)控制-后篇Unit Of Work)
Unity 在MVC上的應(yīng)用(擴(kuò)展篇:日志管理NLog)
正題
回顧上幾篇,我說(shuō)過(guò)會(huì)在今后的擴(kuò)展篇系列加入一些常用的技術(shù),所以今天就說(shuō)說(shuō)在ASP.NET MVC上的JQuery AJAX應(yīng)用。
先來(lái)簡(jiǎn)單描敘一下兩個(gè)用到的東西:
1.JQuery
jQuery由美國(guó)人John Resig創(chuàng)建,至今已吸引了來(lái)自世界各地的眾多javascript高手加入其team,包括來(lái)自德國(guó)的Jörn Zaefferer,羅馬尼亞的Stefan Petre等等。jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫(xiě)更少的代碼,做更多的事情。
2.AJAX
AJAX即“Asynchronous JavaScript and XML”(異步JavaScript和XML),AJAX并非縮寫(xiě)詞,而是由Jesse James Gaiiett創(chuàng)造的名詞,是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。
好了廢話(huà)少說(shuō),直至進(jìn)入我們今日的主題。XD
在教你如何使用JQuery AJAX用法之前我們來(lái)引入2個(gè)在WEB開(kāi)發(fā)方面常見(jiàn)問(wèn)題。
(1)如果你有用過(guò)ASP.NET MVC,你應(yīng)該會(huì)知道,我們?cè)陧?yè)面提交數(shù)據(jù)到Controller的時(shí)候,是基于POST方式的,而數(shù)據(jù)的載體是表單,也就是說(shuō)數(shù)據(jù)要通過(guò)POST方式提交都是在表單里面的,而且每次提交數(shù)據(jù)都要刷新當(dāng)前頁(yè)面,如果想當(dāng)前頁(yè)面某一區(qū)域(div,table等)的數(shù)據(jù)保留起來(lái),或者是說(shuō)某個(gè)輸入框的數(shù)據(jù)保留起來(lái)不清空這應(yīng)該怎么辦?很明顯整個(gè)頁(yè)面的刷新沒(méi)可能再保留頁(yè)面的數(shù)據(jù)了,在這種前提下,我們一般的做法是,把要還原的數(shù)據(jù)先POST去后臺(tái)裝載,然后再?gòu)暮笈_(tái)傳組裝到要返回的數(shù)據(jù)里面再返回到新頁(yè)面讀取,聽(tīng)上這種做法挺別扭的,你別笑,以前還不會(huì)AJAX的時(shí)候,也只能這樣解決這種問(wèn)題,相信很多人都試過(guò)或者還在用這種方式。
(2)第二個(gè)問(wèn)題是,當(dāng)你存在一個(gè)很巨大的表單的時(shí)候,后臺(tái)只需要很小量的數(shù)據(jù)來(lái)計(jì)算,記錄什么的,例如一個(gè)超巨大的表單,里面有1000個(gè)輸入框,而后臺(tái)只需要其中一個(gè)輸入框的數(shù)據(jù),而傳統(tǒng)的POST,要先提交整個(gè)表單,然后再去調(diào)用服務(wù)計(jì)算什么的,你看看,這樣是不是很浪費(fèi)帶寬?只要你極限化看待這個(gè)問(wèn)題,這種做法其實(shí)也是很別扭的,我們的口號(hào),要什么拿什么!!
為了解決這兩個(gè)個(gè)問(wèn)題,我們要使用AJAX技術(shù)。也就是我們今日的主題JQuery AJAX!!終于入住題了~(*^__^*) 嘻嘻……
一如既往,從我們上篇已有的DEMO入手.先看看我們的頁(yè)面,這次先從一個(gè)簡(jiǎn)單的用戶(hù)登錄功能入手教你用JQuery AJAX。

先看看傳統(tǒng)的POST方式實(shí)現(xiàn)登錄功能的代碼

可以看出,我們一般都是這樣去實(shí)現(xiàn)的。
為了實(shí)現(xiàn)AJAX提交,我們?cè)賹?xiě)一個(gè)新的Action。

功能實(shí)現(xiàn)上沒(méi)什么區(qū)別,要注意的是,這里我們發(fā)送回去的是一個(gè)跳轉(zhuǎn)路徑,因?yàn)槲覀円谀_本里跳轉(zhuǎn)。其次要注意的是,也是基于HTTP POST的。。XD
現(xiàn)在開(kāi)始寫(xiě)我們的腳本了。

代碼是寫(xiě)在我們的登錄頁(yè)面的腳本上的,要注意的是,這里的DTO和后臺(tái)的靜態(tài)DTO對(duì)象是對(duì)應(yīng)的,字段要一致,不然是無(wú)法反序列化成功的,而MVC3.0自動(dòng)實(shí)現(xiàn)了對(duì)對(duì)應(yīng)的靜態(tài)類(lèi)的反序列化,很方便!而這里引入序列化/反序列化 概念是因?yàn)椋覀冇肁JAX傳輸?shù)臄?shù)據(jù)是以JSON形式的,JSON數(shù)據(jù)要在網(wǎng)絡(luò)傳輸首先要進(jìn)行序列化,在接收端反序列化才可以成功讀取數(shù)據(jù),你可以看成是封包和解包過(guò)程,這里的出JSON.stringify(DTO)是用來(lái)實(shí)現(xiàn)對(duì)JSON數(shù)據(jù)序列化的,而Javascript本身里沒(méi)有對(duì)數(shù)據(jù)序列化的功能的,所以我們要先引入一個(gè)外部腳本庫(kù)來(lái)滿(mǎn)足這個(gè)需求,看下圖。
![]()
而這個(gè)對(duì)JSON序列化的腳本庫(kù)可以到這里下載: www.json.org
具體實(shí)現(xiàn)代碼我們就完成了,很簡(jiǎn)單,現(xiàn)在我們來(lái)對(duì)比一下效果。
首先看看傳統(tǒng)的POST方式。

我們按Submit按鈕~

再看看我們的JQuery AJAX方式如何~XD

結(jié)果

想必結(jié)果都不用我多說(shuō)了~
本篇結(jié)語(yǔ)
希望對(duì)你們學(xué)習(xí)MVC有所幫助。
作者:桀驁的靈魂
出處:http://www.rzrgm.cn/HuntSoul/
本文版權(quán)歸作者和博客園共有,歡迎轉(zhuǎn)載,但未經(jīng)作者同意必須保留此段聲明,且在文章頁(yè)面明顯位置給出原文連接,否則保留追究法律責(zé)任的權(quán)利。
浙公網(wǎng)安備 33010602011771號(hào)