示例下載：使用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==">標簽，用於存儲控件值數據。如下：
<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異步詳解》來將上面同步提交表單調整為異步提交表單的方式。
<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提交代碼如下：
<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(一般處理文件)”來實現一個高效的異步表單提交。
<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表單插件提交代碼如下：
<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： $('#myForm').ajaxForm({
delegation: true,
target: '#output'
}); |
| replaceTarget |
（默認：false）與target參數共同起作用，True則執行replaceWirh()函數，false則執行html()函數 |
| target |
提供一個Html元素，在請求“成功”並且未設置dataType參數，則將返回的數據replaceWith()或html()掉對象原來的內容，再遍歷對象調用success回調函數。 if (!options.dataType && options.target) {
var oldSuccess = options.success || function(){};
callbacks.push(function(data) {
var fn = options.replaceTarget ? 'replaceWith' : 'html';
$(options.target)[fn](data).each(oldSuccess, arguments);
});
} |
| 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：
$('#myForm').ajaxForm({
delegation: true,
target: '#output'
});
另外：如果你翻看原來碼你可能會發現這樣的綁定代碼：.bind('submit.form-plugin', options, doAjaxSubmit)，即submit事件名后面有個”. form-plugin”。這是jQuery事件命名空間語法，作用是方便事件的管理。
文件上傳示例（被jQuery.form插件封裝的相當簡單，既然寫了就也貼出來吧）
<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>
提交代碼：
<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)
將表當前單元素序列化為字符串形式。
實現如下：
$.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表單在給我們提供便利的背后到底做了什么手腳(源碼分析)。
感謝大家的收看，感覺不錯還請多幫推薦…推薦…推薦……