系列目錄

  Unity 在MVC上的應(yīng)用(上:思路整理)

  Unity 在MVC上的應(yīng)用(中:Repository)

  Unity 在MVC上的應(yīng)用(下:ORM)

  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有所幫助。