【转】4.2使用jQuery.form插件，实现完美的表单异步提交
傳送門：異步編程系列目錄……
?
示例下載：使用jQuery.form插件，實現完美的表單異步提交.rar
?
抓住6月份的尾巴，今天的主題是
今天我想介紹的是一款jQuery的插件：Jquery.form.js?官網。
?????????通過該插件，我們可以非常簡單的實現表單的異步提交，并實現文件上傳、進度條顯示等等。
?????????現在我們從一個ASP.NET同步表單提交開始，然后再將其轉化為異步的表單提交。我寫了3種表單提交示例，并簡單分析了各種方式的利弊。
當然主題還是使用jQuery表單插件輕松實現表單異步提交以及分析下該插件的源碼。?
?
ASP.NET服務器端控件實現同步表單提交
?????????ASP.NET服務器控件最大特征就是標簽包含ID和runat=”server”屬性，在客服端頁面內容中會輸出類似<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGR/8ZxOm5Tn0sfHNJaqE12hKqqJTQ==">標簽，用于存儲控件值數據。如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form?runat="server" id="server_form" method=”post”> ????<table?border="1"> ????????<tr> ????????????<td>用戶名：</td> ????????????<td> ????????????????<asp:TextBox?ID="txtLoginName" runat="server" AutoPostBack=”true” ></asp:TextBox> ????????????</td> ????????</tr> ????????<tr> ????????????<td?colspan="2" style="text-align: center"> ???????????????<asp:Button?ID="btnSubmit" runat="server" Text="服務器控件同步提交模式" /> ???????????????<asp:Button?ID="btnUnSubmit" runat="server" OnClientClick="return false;" Text="不提交表單" /> ????????????</td> ????????</tr> ????</table> </form> <asp:Label?ID="labResponse" runat="server"></asp:Label> |
我們用ASP.NET服務器控件構建了一個表單，在ASP.NET頁面中有這樣限定：
1)?????????一頁只能有一個服務器端?Form?標記，其他服務器端控件都在該表單中。
2)?????????頁面中服務器端Form中任何導致頁面回發的服務器端控件事件都會觸發表單提交事件submit。比如：
a)?????????單擊沒有在OnClientClick事件中return false的服務器端按鈕控件
b)?????????將AutoPostBack屬性設置為true的TextBox、RadioButton、CheckBox、DropDownList等服務器端控件的值改動時都會觸發頁面回發。
c)?????????另外：type=”submit”的客服端標簽<input type=”submit” />導致表單提交
此方案優勢：
1)?????????我們在后臺可以非常輕易的獲取服務器端控件的值，比如使用this. txtLoginName.Text訪問控件的值或根據表單提交方式在this.Context.Request中獲取表單元素值。
2)?????????我們在后臺可以輕松設置頁面服務器端控件的值，比如使用this. labResponse.Text = “表單提交成功”。
此方案劣勢：
?????????劣勢很明顯，效率低下，每一次導致的頁面回發都會觸發完整的ASP.NET頁面生命周期，造成出現“白頁”的情況。（更多描述請看：ASP.NET編程模型之ASP.NET頁面生命周期圖解）
?
?????????
?
jQuery異步提交表單
現在我們已經意識到使用同步方式提交表單會造成出現“白頁”的糟糕用戶體驗，那好，現在我使用上一篇分享的技術《觸碰jQuery：AJAX異步詳解》來將上面同步提交表單調整為異步提交表單的方式。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <form?id="form1" method="post"> ????<table?border="1"> ????????<tr> ????????????<td>用戶名：</td> ????????????<td> ????????????????<input?type="text" name="loginName" /></td> ????????</tr> ????????<tr> ????????????<td>愛? 好：</td> ????????????<td> ????????????????<input?type="checkbox" name="cbLoveYy" value="1" />游泳 ????????????????<input?type="checkbox" name="cbLoveYx" value="1" />游戲 ????????????????<input?type="checkbox" name="cbLovePs" value="1" />爬山 ????????????</td> ????????</tr> ????????<tr> ????????????<td?colspan="2" style="text-align: center"> ????????????????<input?id="btnAjaxSubmit" type="submit" value="jQuery.ajax提交" /> ????????????</td> ????????</tr> ????</table> </form> |
jQuery提交代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> ????$(document).ready(function?() { ????????$("#btnAjaxSubmit").click(function?() { ????????????var?options = { ????????????????url: 'async_submit_test1.aspx?action=SaveUserInfo', ????????????????type: 'post', ????????????????dataType: 'text', ????????????????data: $("#form1").serialize(), ????????????????success: function?(data) { ????????????????????if?(data.length > 0) ????????????????????????$("#responseText").text(data); ????????????????} ????????????}; ????????????$.ajax(options); ????????????return?false; ????????}); ????}); </script> |
我們通過$("#form1").serialize()將表單元素的數據轉化為字符串，然后通過$.ajax()執行異步請求資源。
方案：jQuery.ajax() + .aspx請求
此方案優勢：
1)?????????我們不會感覺頁面的“閃一閃”效果
2)?????????我們不會因為服務器耗時響應而導致出現“百頁”的糟糕用戶體驗。
此方案劣勢：
1)?????????此方案中我還是使用了aspx頁面去響應請求，只是在后臺通過action參數去做相應處理，盡管是異步操作但卻完完整整的跑了一遍ASP.NET頁面生命周期（這也是在Response.Write()輸出完自己的東西后必須調用Response.End();來提前終止生命周期，否則頁面信息也會一起返回）
2)?????????jQuery庫提供的序列化表單字符串方法不能收集文件上傳的表單元素，如，$("#form1").serialize()。所以對于包含文件上傳的表單我們還需通過<iframe>模擬異步表單提交。（<iframe>模擬異步表單提交的過程我將在分析jQuery.form插件的源碼小節進行說明）
（jQuery庫提供的序列化字符串的數據來源時表單的elements屬性，而<input type=”file” />的表單元素不包含在elements中）
?
?????????當然jQuery.ajax()也可以結合.ashx文件(一般處理文件)或其他方式實現高效異步請求，這邊只是為了說明：異步請求aspx頁面也會跑一邊aspx頁面生命周期的事實。
?
jQuery.form插件輕松實現表單提交
?????????現在我們使用jQuery的表單插件Jquery.form.js（官網）來實現異步表單提交。
1)?????????該插件需要Jquery最低版本為v1.5
2)?????????該插件提供了ajaxSubmit和ajaxForm兩種表單提交方式，但不要對同一個表單同時使用兩種方式。
現在我將通過“jQuery+jQuery.form插件+ashx(一般處理文件)”來實現一個高效的異步表單提交。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form?id="form1" action="ajaxOperation.ashx" method="post"> ????<table?border="1"> ????????<caption>jQuery.form.js異步提交方式</caption> ????????<tr> ????????????<td>用戶名：</td> ????????????<td> ????????????????<input?type="text" name="loginName" /></td> ????????</tr> ????????<tr> ????????????<td?colspan="2" style="text-align: center"> ????????????????<button?id="btnAjaxSubmit">ajaxSubmit提交</button> ???????????????? ????????????????<input?id="btnAjaxForm" type="submit" value="ajaxForm提交" /> ????????????</td> ????????</tr> ????</table> </form> |
1)?????????為<form>標簽指定action值，指定使用ajaxOperation.ashx處理該表單請求。
2)?????????使用兩個提交按鈕btnAjaxSubmit和btnAjaxForm分別對應jQuery.form插件提供的兩種表單提交API。
jQuery表單插件提交代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript"> ????$(document).ready(function?() { ????var?options = { ????????success: function?(data) { ????????????$("#responseText").text(data); ????????} ????}; ? ????????// ajaxForm ????????$("#form1").ajaxForm(options); ? ????????// ajaxSubmit ????????$("#btnAjaxSubmit").click(function?() { ????????????$("#form1").ajaxSubmit(options); ????????}); ????}); </script> |
方案：jQuery.form.js插件?+ .ashx請求
?????????此方案優勢：
1)?????????簡簡單單幾句代碼，我們就可以實現表單的提交，并且可靈活通過ajaxSubmit()函數基于任何事件的觸發實現表單異步提交。
2)?????????支持文件上傳功能，并在新瀏覽器中支持進度條更新。（在jQuery.form插件源碼分析中會進行說明）
3)?????????與jQuery庫完美結合，支持jQuery.ajax()函數觸發的各種事件，支持jQuery.ajax()中所傳遞的參數。（在jQuery.form插件源碼分析中會進行說明）
??????????
?????????好了，這樣短而易讀的代碼，這樣的偷懶方式不正是我們追求的嗎？那jQuery.form插件提供的表單提交API是否高效呢？內部又做了些什么？接下來跟著我看看jQuery.form插件內部實現吧。。。
?
jQuery.form插件源碼分析
?????????jQuery.form插件（Jquery.form.js?官網），可以讓我們非常簡單的實現表單的異步提交、實現文件上傳、進度條顯示等等功能。
?
1.?????????$(“form1”).ajaxSubmit(options)
1)?????????ajaxSubmit是jQuery表單插件核心函數。非常靈活，因為它依賴于事件機制，只要有事件觸發就能使用ajaxSubmit()提交表單，eg：超鏈接、圖片、按鈕的click事件。
2)?????????options參數是
a)?????????一個函數，則為表單提交成功后調用的回調函數，即，options={success:function}。
b)?????????options參數是一個集合，一個參數鍵值對
| 鍵名 | 描述 | ||
| type | （默認為表單的method屬性值，若未設置取GET） 請求的類型，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。 | ||
| url | （默認取表單的action屬性值，若未設置默認取window.location.href） 請求的URL地址，可以為絕對地址也可以為相對地址。 | ||
| data | （對象成員必須包含name和value屬性）提供額外數據對象，通過$.param()函數返回序列化后的字符串，稍后會拼接到表單元素序列化的字符串之后。 | ||
| extraData | （此參數無需外部提供，由內部處理） 此參數是data在進行序列化成字符串之前的一個拷貝，只用于在表單包含<input type=”file” />并且是老瀏覽器。 因為在老瀏覽器中文件上傳文件我們需要通過<iframe>來模擬異步提交，此時extraData會轉變為<input type=”hidden” />元素包含在表單中，被一起提交到服務器。 | ||
| dataType | 一般不需自己設置。參數作用請看：《jQuery.ajax()-dataType》 | ||
| traditional | 如果你想要用傳統的方式來序列化數據，那么就設置為true。請參考$.param()深度遞歸詳解。 | ||
| delegation | （適用于ajaxForm）ajaxForm支持Jquery插件的委托方式（需要Jquery v1.7+），所以當你調用ajaxForm的時候其表單form不一定存在，但動態構建的form會在適當的時候調用ajaxSubmit。Eg：
| ||
| replaceTarget | （默認：false）與target參數共同起作用，True則執行replaceWirh()函數，false則執行html()函數 | ||
| target | 提供一個Html元素，在請求“成功”并且未設置dataType參數，則將返回的數據replaceWith()或html()掉對象原來的內容，再遍歷對象調用success回調函數。
| ||
| includeHidden | 在請求成功后，若設置執行clearForm()函數清空表單元素則會根據includeHidden設置決定如何清空隱藏域元素。 1)?????????傳遞true，表示清空表單的所有隱藏域元素。 2)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域 | ||
| clearForm | 請求成功時觸發（同success），并用options. includeHidden做為回調函數參數。 回調函數：$form.clearForm(options.includeHidden); | ||
| resetForm | 請求成功時觸發（同success）。 回調函數：$form.resetForm() | ||
| semantic | 布爾值，指示表單元素序列化時是否嚴格按照表單元素定義順序。 在序列化只有<input type=”image” />元素會放在序列化字符串的最后，若semantic=true，則會按照它的定義順序進行序列化。 若你服務器嚴格要求表單序列化字符串的順序，則使用此參數進行控制。 | ||
| iframe | （默認：false）若有文件上傳'input[type=file]:enabled[value!=""]'，指示是否應該使用<iframe>標簽（在支持html5文件上傳新特性的瀏覽器中不會使用iframe模式） | ||
| iframeTarget | 指定一個現有的<iframe>元素，否則將自動生成一個<iframe>元素以及name屬性值。若現有的<iframe>元素沒有設置name屬性，則會自動生成一個name值 | ||
| iframeSrc | 為<iframe>元素設定src屬性值 | ||
| ? 回調函數 | |||
| beforeSerialize | 提供在將表單元素序列化為字符串之前，處理表單元素的回調函數。 簽名：function(form,options) 函數說明：當前表單對象、options參數集合 返回值：返回false，表示終止表單提交操作。 | ||
| beforeSubmit | 提供在執行表單提交之前，處理數據的回調函數。 簽名：function(a,form,options) 函數說明：通過formToArray(options.semantic, elements)返回的表單元素數組、當前表單對象、options參數集合 返回值：返回false，表示終止表單提交操作。 | ||
3)?????????$(“form1”).ajaxSubmit(options)?內部直接或模擬jQuery.ajax(options)異步提交，所以也直接支持jQuery.ajax(options)所能處理的參數，并且支持jQuery.ajax(options)過程中所觸發的5個局部事件及6個全局事件。
4)?????????$(“form1”).ajaxSubmit(options)?內部將內部直接調用jQuery.ajax(options)返回的jqxhr對象或模擬的jqxhr對象進行了緩存，所以我們可以通過$(“#form1”).data(‘jqxhr’)獲取到本次提交生成的jqxhr對象。
5)?????????更多jQuery.ajax()函數介紹請看：《觸碰jQuery：AJAX異步詳解》
?
ajaxSubmit函數處理流程：
1)?????????根據<form action=”” method=””>處理url、type參數以及success、iframeSrc等參數。
2)?????????觸發beforeSerialize()回調函數
3)?????????序列化data參數和表單元素
4)?????????觸發beforeSubmit()回調函數
5)?????????根據type參數處理options.data和options.url參數
6)?????????注冊resetForm()和clearForm()回調函數
7)?????????注冊將返回數據加載到options.target指定的元素上的回調函數
8)?????????注冊success回調函數，若有options.target則循環該元素，并為每個子元素注冊success回調函數
9)?????????處理<input type=”file” />文件上傳元素
a)?????????不包含文件元素，直接調用jQuery.ajax()函數。
b)?????????包含文件元素，并且不支持XMLHttpRequest Level 2提供的文件上傳新特性window.FormData。則通過IFrame模擬表單異步提交。
???????????????????????????????????????i.??????????????調用fileUploadIframe()函數。
?????????????????????????????????????ii.??????????????根據options. iframeTarget設置決定是創建一個<iframe>元素還是使用現有的<iframe>元素
????????????????????????????????????iii.??????????????模擬xhr對象以及jQuery.ajax()過程，以支持xhr對象返回和ajax事件觸發
????????????????????????????????????iv.??????????????設置<form>的target指向<iframe>元素、encoding和enctype為“multipart/form-data”、method為”post”值等等
?????????????????????????????????????v.??????????????處理options.extraData為<input type=”hidden” />元素并添加到<form>元素中。
????????????????????????????????????vi.??????????????調用<form>的submit()事件。（同步提交，但因為<form>的target指向<iframe>標簽，所以刷新的是<iframe>中的內容，以此模擬異步提交）
c)?????????包含文件元素，并且支持XMLHttpRequest Level 2提供的新特性，則調用fileUploadXhr()函數，通過FormData()對象將數據傳遞給options.data參數，再調用jQuery.ajax(options)函數異步提交表單。并且XMLHttpRequest Level 2的新特性還支持進度條提示功能。（更多新特性請看：《XMLHttpRequest Level 2?使用指南》）
10)?????將內部jqxhr緩存起來，以供訪問。$form.removeData('jqxhr').data('jqxhr', jqxhr);
11)?????返回表單元素本身，以便符合jQuery的鏈式操作模式。
?
2.?????????$(“form1”).ajaxForm(options)
是對$(“any”).ajaxSubmit(options)函數的一個封裝，適用于表單提交的方式（注意，主體對象是<form>），會幫你管理表單的submit和提交元素（[type=submit],[type=image]）的click事件。在出發表單的submit事件時：阻止submit()事件的默認行為（同步提交的行為）并且調用$(this).ajaxSubmit(options)函數。
ajaxForm支持Jquery插件的委托方式（需要Jquery v1.7+），所以當你調用ajaxForm的時候其表單form不一定存在，ajaxSubmit將在適當的時候調用。Eg：
| 1 2 3 4 | $('#myForm').ajaxForm({ ????delegation: true, ????target: '#output' }); |
?????????另外：如果你翻看原來碼你可能會發現這樣的綁定代碼：.bind('submit.form-plugin', options, doAjaxSubmit)，即submit事件名后面有個”. form-plugin”。這是jQuery事件命名空間語法，作用是方便事件的管理。
?
文件上傳示例（被jQuery.form插件封裝的相當簡單，既然寫了就也貼出來吧）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <form?id="form1" action="ajaxOperation.ashx?Action=formUpload" method="post" enctype="multipart/form-data"> ????<table> ????????<tr> ????????????<td>附件名字:</td> ????????????<td> ????????????????<input?type="text" name="fileName" /></td> ????????</tr> ????????<tr> ????????????<td>附件:</td> ????????????<td> ????????????????<input?type="file" name="document" /></td> ????????</tr> ????????<tr> ????????????<td?colspan="2" style="align-content: center"> ????????????????<input?type="submit" value="模擬iframe提交表單" /> ????????????</td> ????????</tr> ????</table> </form> <label?id="responseText"></label> |
?????????提交代碼：
| 1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> ????$(function?() { ????????var?options = { ????????????success: function?(data) { ????????????????$("#responseText").text(data); ????????????} ????????}; ? ????????$("#form1").ajaxForm(options); ????}); </script> |
?
3.?????????$(“form1”).ajaxFormUnbind()
???????????????????取消$(“”).ajaxForm(options)函數對指定表單綁定的submit和click事件。
?????????????????????????????????????????????????????????????????????????????
4.?????????$(“form1”).formToArray(semantic,elements)
???????????????????序列化當前表單元素到一個數組中，每個數組元素都是包含name和value屬性的對象。返回值是內部構件的一個數組元素，而elements參數將包含除<input type=”image”>以外的所有表單元素。
?
5.?????????$(“form1”).formSerialize(semantic)
將表當前單元素序列化為字符串形式。
實現如下：
| 1 2 3 | $.fn.formSerialize = function(semantic) { ????return?$.param(this.formToArray(semantic)); }; |
?
6.?????????$(“form1”).fieldSerialize(successful)??
???????????????????序列化包含name屬性的表單元素為一個字符串。Successful參數標識是否獲取type為reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
?
7.?????????$(“form1”).fieldValue(successful)?或?$.fieldValue(element, successful)
獲取指定表單中的表單元素或指定表單元素的值。Successful參數標識是否獲取type為reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
?
8.?????????$(“form1”).clearForm(includeHidden)
清空當前表單中input、select、textarea元素的值。includeHidden設置決定如何清空隱藏域元素。
a)?????????傳遞true，表示清空表單的所有隱藏域元素。
b)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域
?
9.?????????$.(“form1”).clearFields(includeHidden)?和?$.(“form1”).clearInputs(includeHidden)
作用相同，清空當前表單中所有表單元素的指。includeHidden設置決定如何清空隱藏域元素。
a)?????????傳遞true，表示清空表單的所有隱藏域元素。
b)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域
?
10.?????$(“form1”).resetForm()
重置當前表單元素，導致所有表單元素重置到它的初始值。
?
11.?????$(“form1”).selected(select)
將當前表單元素中所有checkbox、radio設置為select。select參數為布爾值。
?
?
?
?????????本文到此結束，通過此博文相信各位，
1.?????????再也不會去寫齷齪的同步提交和使用aspx進行異步相應了。
2.?????????再也不用煩惱表單提交過程中各個控件的值如何獲取的問題，并且通過jQuery.form表單插件輕松實現表單異步提交、文件上傳及進度條顯示。
3.?????????清楚的認識了jQuery.form表單在給我們提供便利的背后到底做了什么手腳(源碼分析)。
?
?
?????????感謝大家的收看，感覺不錯還請多幫推薦…推薦…推薦……
?
?
?
作者：滴答的雨
出處：http://www.cnblogs.com/heyuquan/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
總結
以上是生活随笔為你收集整理的【转】4.2使用jQuery.form插件，实现完美的表单异步提交的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新东方带货火了：5万月薪招聘双语主播
- 下一篇： 【转】逆变与协变详解