傳送門：異步編程系列目錄……

?

示例下載：使用jQuery.form插件，實(shí)現(xiàn)完美的表單異步提交.rar

?

抓住6月份的尾巴，今天的主題是

今天我想介紹的是一款jQuery的插件：Jquery.form.js?官網(wǎng)。

?????????通過該插件，我們可以非常簡單的實(shí)現(xiàn)表單的異步提交，并實(shí)現(xiàn)文件上傳、進(jìn)度條顯示等等。

?????????現(xiàn)在我們從一個(gè)ASP.NET同步表單提交開始，然后再將其轉(zhuǎn)化為異步的表單提交。我寫了3種表單提交示例，并簡單分析了各種方式的利弊。

當(dāng)然主題還是使用jQuery表單插件輕松實(shí)現(xiàn)表單異步提交以及分析下該插件的源碼。?

?

ASP.NET服務(wù)器端控件實(shí)現(xiàn)同步表單提交

?????????ASP.NET服務(wù)器控件最大特征就是標(biāo)簽包含ID和runat=”server”屬性，在客服端頁面內(nèi)容中會(huì)輸出類似<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGR/8ZxOm5Tn0sfHNJaqE12hKqqJTQ==">標(biāo)簽，用于存儲(chǔ)控件值數(shù)據(jù)。如下：

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="服務(wù)器控件同步提交模式" /> ???????????????<asp:Button?ID="btnUnSubmit" runat="server" OnClientClick="return false;" Text="不提交表單" /> ????????????</td> ????????</tr> ????</table> </form> <asp:Label?ID="labResponse" runat="server"></asp:Label>

我們用ASP.NET服務(wù)器控件構(gòu)建了一個(gè)表單，在ASP.NET頁面中有這樣限定：

1)?????????一頁只能有一個(gè)服務(wù)器端?Form?標(biāo)記，其他服務(wù)器端控件都在該表單中。

2)?????????頁面中服務(wù)器端Form中任何導(dǎo)致頁面回發(fā)的服務(wù)器端控件事件都會(huì)觸發(fā)表單提交事件submit。比如：

a)?????????單擊沒有在OnClientClick事件中return false的服務(wù)器端按鈕控件

b)?????????將AutoPostBack屬性設(shè)置為true的TextBox、RadioButton、CheckBox、DropDownList等服務(wù)器端控件的值改動(dòng)時(shí)都會(huì)觸發(fā)頁面回發(fā)。

c)?????????另外：type=”submit”的客服端標(biāo)簽<input type=”submit” />導(dǎo)致表單提交

此方案優(yōu)勢(shì)：

1)?????????我們?cè)诤笈_(tái)可以非常輕易的獲取服務(wù)器端控件的值，比如使用this. txtLoginName.Text訪問控件的值或根據(jù)表單提交方式在this.Context.Request中獲取表單元素值。

2)?????????我們?cè)诤笈_(tái)可以輕松設(shè)置頁面服務(wù)器端控件的值，比如使用this. labResponse.Text = “表單提交成功”。

此方案劣勢(shì)：

?????????劣勢(shì)很明顯，效率低下，每一次導(dǎo)致的頁面回發(fā)都會(huì)觸發(fā)完整的ASP.NET頁面生命周期，造成出現(xiàn)“白頁”的情況。（更多描述請(qǐng)看：ASP.NET編程模型之ASP.NET頁面生命周期圖解）

?

?????????

?

jQuery異步提交表單

現(xiàn)在我們已經(jīng)意識(shí)到使用同步方式提交表單會(huì)造成出現(xiàn)“白頁”的糟糕用戶體驗(yàn)，那好，現(xiàn)在我使用上一篇分享的技術(shù)《觸碰jQuery：AJAX異步詳解》來將上面同步提交表單調(diào)整為異步提交表單的方式。

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()將表單元素的數(shù)據(jù)轉(zhuǎn)化為字符串，然后通過$.ajax()執(zhí)行異步請(qǐng)求資源。

方案：jQuery.ajax() + .aspx請(qǐng)求

此方案優(yōu)勢(shì)：

1)?????????我們不會(huì)感覺頁面的“閃一閃”效果

2)?????????我們不會(huì)因?yàn)榉?wù)器耗時(shí)響應(yīng)而導(dǎo)致出現(xiàn)“百頁”的糟糕用戶體驗(yàn)。

此方案劣勢(shì)：

1)?????????此方案中我還是使用了aspx頁面去響應(yīng)請(qǐng)求，只是在后臺(tái)通過action參數(shù)去做相應(yīng)處理，盡管是異步操作但卻完完整整的跑了一遍ASP.NET頁面生命周期（這也是在Response.Write()輸出完自己的東西后必須調(diào)用Response.End();來提前終止生命周期，否則頁面信息也會(huì)一起返回）

2)?????????jQuery庫提供的序列化表單字符串方法不能收集文件上傳的表單元素，如，$("#form1").serialize()。所以對(duì)于包含文件上傳的表單我們還需通過<iframe>模擬異步表單提交。（<iframe>模擬異步表單提交的過程我將在分析jQuery.form插件的源碼小節(jié)進(jìn)行說明）

（jQuery庫提供的序列化字符串的數(shù)據(jù)來源時(shí)表單的elements屬性，而<input type=”file” />的表單元素不包含在elements中）

?

?????????當(dāng)然jQuery.ajax()也可以結(jié)合.ashx文件(一般處理文件)或其他方式實(shí)現(xiàn)高效異步請(qǐng)求，這邊只是為了說明：異步請(qǐng)求aspx頁面也會(huì)跑一邊aspx頁面生命周期的事實(shí)。

?

jQuery.form插件輕松實(shí)現(xiàn)表單提交

?????????現(xiàn)在我們使用jQuery的表單插件Jquery.form.js（官網(wǎng)）來實(shí)現(xiàn)異步表單提交。

1)?????????該插件需要Jquery最低版本為v1.5

2)?????????該插件提供了ajaxSubmit和ajaxForm兩種表單提交方式，但不要對(duì)同一個(gè)表單同時(shí)使用兩種方式。

現(xiàn)在我將通過“jQuery+jQuery.form插件+ashx(一般處理文件)”來實(shí)現(xiàn)一個(gè)高效的異步表單提交。

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> ????????????????&nbsp; ????????????????<input?id="btnAjaxForm" type="submit" value="ajaxForm提交" /> ????????????</td> ????????</tr> ????</table> </form>

1)?????????為<form>標(biāo)簽指定action值，指定使用ajaxOperation.ashx處理該表單請(qǐng)求。

2)?????????使用兩個(gè)提交按鈕btnAjaxSubmit和btnAjaxForm分別對(duì)應(yīng)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請(qǐng)求

?????????此方案優(yōu)勢(shì)：

1)?????????簡簡單單幾句代碼，我們就可以實(shí)現(xiàn)表單的提交，并且可靈活通過ajaxSubmit()函數(shù)基于任何事件的觸發(fā)實(shí)現(xiàn)表單異步提交。

2)?????????支持文件上傳功能，并在新瀏覽器中支持進(jìn)度條更新。（在jQuery.form插件源碼分析中會(huì)進(jìn)行說明）

3)?????????與jQuery庫完美結(jié)合，支持jQuery.ajax()函數(shù)觸發(fā)的各種事件，支持jQuery.ajax()中所傳遞的參數(shù)。（在jQuery.form插件源碼分析中會(huì)進(jìn)行說明）

??????????

?????????好了，這樣短而易讀的代碼，這樣的偷懶方式不正是我們追求的嗎？那jQuery.form插件提供的表單提交API是否高效呢？內(nèi)部又做了些什么？接下來跟著我看看jQuery.form插件內(nèi)部實(shí)現(xiàn)吧。。。

?

jQuery.form插件源碼分析

?????????jQuery.form插件（Jquery.form.js?官網(wǎng)），可以讓我們非常簡單的實(shí)現(xiàn)表單的異步提交、實(shí)現(xiàn)文件上傳、進(jìn)度條顯示等等功能。

?

1.?????????$(“form1”).ajaxSubmit(options)

1)?????????ajaxSubmit是jQuery表單插件核心函數(shù)。非常靈活，因?yàn)樗蕾囉谑录C(jī)制，只要有事件觸發(fā)就能使用ajaxSubmit()提交表單，eg：超鏈接、圖片、按鈕的click事件。

2)?????????options參數(shù)是

a)?????????一個(gè)函數(shù)，則為表單提交成功后調(diào)用的回調(diào)函數(shù)，即，options={success:function}。

b)?????????options參數(shù)是一個(gè)集合，一個(gè)參數(shù)鍵值對(duì)

鍵名	描述
type	（默認(rèn)為表單的method屬性值，若未設(shè)置取GET） 請(qǐng)求的類型，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。
url	（默認(rèn)取表單的action屬性值，若未設(shè)置默認(rèn)取window.location.href） 請(qǐng)求的URL地址，可以為絕對(duì)地址也可以為相對(duì)地址。
data	（對(duì)象成員必須包含name和value屬性）提供額外數(shù)據(jù)對(duì)象，通過$.param()函數(shù)返回序列化后的字符串，稍后會(huì)拼接到表單元素序列化的字符串之后。
extraData	（此參數(shù)無需外部提供，由內(nèi)部處理） 此參數(shù)是data在進(jìn)行序列化成字符串之前的一個(gè)拷貝，只用于在表單包含<input type=”file” />并且是老瀏覽器。 因?yàn)樵诶蠟g覽器中文件上傳文件我們需要通過<iframe>來模擬異步提交，此時(shí)extraData會(huì)轉(zhuǎn)變?yōu)?lt;input type=”hidden” />元素包含在表單中，被一起提交到服務(wù)器。
dataType	一般不需自己設(shè)置。參數(shù)作用請(qǐng)看：《jQuery.ajax()-dataType》
traditional	如果你想要用傳統(tǒng)的方式來序列化數(shù)據(jù)，那么就設(shè)置為true。請(qǐng)參考$.param()深度遞歸詳解。
delegation	（適用于ajaxForm）ajaxForm支持Jquery插件的委托方式（需要Jquery v1.7+），所以當(dāng)你調(diào)用ajaxForm的時(shí)候其表單form不一定存在，但動(dòng)態(tài)構(gòu)建的form會(huì)在適當(dāng)?shù)臅r(shí)候調(diào)用ajaxSubmit。Eg： 1 2 3 4 $('#myForm').ajaxForm({ ????delegation: true, ????target: '#output' });
replaceTarget	（默認(rèn)：false）與target參數(shù)共同起作用，True則執(zhí)行replaceWirh()函數(shù)，false則執(zhí)行html()函數(shù)
target	提供一個(gè)Html元素，在請(qǐng)求“成功”并且未設(shè)置dataType參數(shù)，則將返回的數(shù)據(jù)replaceWith()或html()掉對(duì)象原來的內(nèi)容，再遍歷對(duì)象調(diào)用success回調(diào)函數(shù)。 1 2 3 4 5 6 7 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	在請(qǐng)求成功后，若設(shè)置執(zhí)行clearForm()函數(shù)清空表單元素則會(huì)根據(jù)includeHidden設(shè)置決定如何清空隱藏域元素。 1)?????????傳遞true，表示清空表單的所有隱藏域元素。 2)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域
clearForm	請(qǐng)求成功時(shí)觸發(fā)（同success），并用options. includeHidden做為回調(diào)函數(shù)參數(shù)。 回調(diào)函數(shù)：$form.clearForm(options.includeHidden);
resetForm	請(qǐng)求成功時(shí)觸發(fā)（同success）。 回調(diào)函數(shù)：$form.resetForm()
semantic	布爾值，指示表單元素序列化時(shí)是否嚴(yán)格按照表單元素定義順序。 在序列化只有<input type=”image” />元素會(huì)放在序列化字符串的最后，若semantic=true，則會(huì)按照它的定義順序進(jìn)行序列化。 若你服務(wù)器嚴(yán)格要求表單序列化字符串的順序，則使用此參數(shù)進(jìn)行控制。
iframe	（默認(rèn)：false）若有文件上傳'input[type=file]:enabled[value!=""]'，指示是否應(yīng)該使用<iframe>標(biāo)簽（在支持html5文件上傳新特性的瀏覽器中不會(huì)使用iframe模式）
iframeTarget	指定一個(gè)現(xiàn)有的<iframe>元素，否則將自動(dòng)生成一個(gè)<iframe>元素以及name屬性值。若現(xiàn)有的<iframe>元素沒有設(shè)置name屬性，則會(huì)自動(dòng)生成一個(gè)name值
iframeSrc	為<iframe>元素設(shè)定src屬性值
? 回調(diào)函數(shù)
beforeSerialize	提供在將表單元素序列化為字符串之前，處理表單元素的回調(diào)函數(shù)。 簽名：function(form,options) 函數(shù)說明：當(dāng)前表單對(duì)象、options參數(shù)集合 返回值：返回false，表示終止表單提交操作。
beforeSubmit	提供在執(zhí)行表單提交之前，處理數(shù)據(jù)的回調(diào)函數(shù)。 簽名：function(a,form,options) 函數(shù)說明：通過formToArray(options.semantic, elements)返回的表單元素?cái)?shù)組、當(dāng)前表單對(duì)象、options參數(shù)集合 返回值：返回false，表示終止表單提交操作。

3)?????????$(“form1”).ajaxSubmit(options)?內(nèi)部直接或模擬jQuery.ajax(options)異步提交，所以也直接支持jQuery.ajax(options)所能處理的參數(shù)，并且支持jQuery.ajax(options)過程中所觸發(fā)的5個(gè)局部事件及6個(gè)全局事件。

4)?????????$(“form1”).ajaxSubmit(options)?內(nèi)部將內(nèi)部直接調(diào)用jQuery.ajax(options)返回的jqxhr對(duì)象或模擬的jqxhr對(duì)象進(jìn)行了緩存，所以我們可以通過$(“#form1”).data(‘jqxhr’)獲取到本次提交生成的jqxhr對(duì)象。

5)?????????更多jQuery.ajax()函數(shù)介紹請(qǐng)看：《觸碰jQuery：AJAX異步詳解》

?

ajaxSubmit函數(shù)處理流程：

1)?????????根據(jù)<form action=”” method=””>處理url、type參數(shù)以及success、iframeSrc等參數(shù)。

2)?????????觸發(fā)beforeSerialize()回調(diào)函數(shù)

3)?????????序列化data參數(shù)和表單元素

4)?????????觸發(fā)beforeSubmit()回調(diào)函數(shù)

5)?????????根據(jù)type參數(shù)處理options.data和options.url參數(shù)

6)?????????注冊(cè)resetForm()和clearForm()回調(diào)函數(shù)

7)?????????注冊(cè)將返回?cái)?shù)據(jù)加載到options.target指定的元素上的回調(diào)函數(shù)

8)?????????注冊(cè)success回調(diào)函數(shù)，若有options.target則循環(huán)該元素，并為每個(gè)子元素注冊(cè)success回調(diào)函數(shù)

9)?????????處理<input type=”file” />文件上傳元素

a)?????????不包含文件元素，直接調(diào)用jQuery.ajax()函數(shù)。

b)?????????包含文件元素，并且不支持XMLHttpRequest Level 2提供的文件上傳新特性window.FormData。則通過IFrame模擬表單異步提交。

???????????????????????????????????????i.??????????????調(diào)用fileUploadIframe()函數(shù)。

?????????????????????????????????????ii.??????????????根據(jù)options. iframeTarget設(shè)置決定是創(chuàng)建一個(gè)<iframe>元素還是使用現(xiàn)有的<iframe>元素

????????????????????????????????????iii.??????????????模擬xhr對(duì)象以及jQuery.ajax()過程，以支持xhr對(duì)象返回和ajax事件觸發(fā)

????????????????????????????????????iv.??????????????設(shè)置<form>的target指向<iframe>元素、encoding和enctype為“multipart/form-data”、method為”post”值等等

?????????????????????????????????????v.??????????????處理options.extraData為<input type=”hidden” />元素并添加到<form>元素中。

????????????????????????????????????vi.??????????????調(diào)用<form>的submit()事件。（同步提交，但因?yàn)?lt;form>的target指向<iframe>標(biāo)簽，所以刷新的是<iframe>中的內(nèi)容，以此模擬異步提交）

c)?????????包含文件元素，并且支持XMLHttpRequest Level 2提供的新特性，則調(diào)用fileUploadXhr()函數(shù)，通過FormData()對(duì)象將數(shù)據(jù)傳遞給options.data參數(shù)，再調(diào)用jQuery.ajax(options)函數(shù)異步提交表單。并且XMLHttpRequest Level 2的新特性還支持進(jìn)度條提示功能。（更多新特性請(qǐng)看：《XMLHttpRequest Level 2?使用指南》）

10)?????將內(nèi)部jqxhr緩存起來，以供訪問。$form.removeData('jqxhr').data('jqxhr', jqxhr);

11)?????返回表單元素本身，以便符合jQuery的鏈?zhǔn)讲僮髂Ｊ健?/span>

?

2.?????????$(“form1”).ajaxForm(options)

是對(duì)$(“any”).ajaxSubmit(options)函數(shù)的一個(gè)封裝，適用于表單提交的方式（注意，主體對(duì)象是<form>），會(huì)幫你管理表單的submit和提交元素（[type=submit],[type=image]）的click事件。在出發(fā)表單的submit事件時(shí)：阻止submit()事件的默認(rèn)行為（同步提交的行為）并且調(diào)用$(this).ajaxSubmit(options)函數(shù)。

ajaxForm支持Jquery插件的委托方式（需要Jquery v1.7+），所以當(dāng)你調(diào)用ajaxForm的時(shí)候其表單form不一定存在，ajaxSubmit將在適當(dāng)?shù)臅r(shí)候調(diào)用。Eg：

1 2 3 4

$('#myForm').ajaxForm({ ????delegation: true, ????target: '#output' });

?????????另外：如果你翻看原來碼你可能會(huì)發(fā)現(xiàn)這樣的綁定代碼：.bind('submit.form-plugin', options, doAjaxSubmit)，即submit事件名后面有個(gè)”. form-plugin”。這是jQuery事件命名空間語法，作用是方便事件的管理。

?

文件上傳示例（被jQuery.form插件封裝的相當(dāng)簡單，既然寫了就也貼出來吧）

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)函數(shù)對(duì)指定表單綁定的submit和click事件。

?????????????????????????????????????????????????????????????????????????????

4.?????????$(“form1”).formToArray(semantic,elements)

???????????????????序列化當(dāng)前表單元素到一個(gè)數(shù)組中，每個(gè)數(shù)組元素都是包含name和value屬性的對(duì)象。返回值是內(nèi)部構(gòu)件的一個(gè)數(shù)組元素，而elements參數(shù)將包含除<input type=”image”>以外的所有表單元素。

?

5.?????????$(“form1”).formSerialize(semantic)

將表當(dāng)前單元素序列化為字符串形式。

實(shí)現(xiàn)如下：

1 2 3

$.fn.formSerialize = function(semantic) { ????return?$.param(this.formToArray(semantic)); };

?

6.?????????$(“form1”).fieldSerialize(successful)??

???????????????????序列化包含name屬性的表單元素為一個(gè)字符串。Successful參數(shù)標(biāo)識(shí)是否獲取type為reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。

?

7.?????????$(“form1”).fieldValue(successful)?或?$.fieldValue(element, successful)

獲取指定表單中的表單元素或指定表單元素的值。Successful參數(shù)標(biāo)識(shí)是否獲取type為reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。

?

8.?????????$(“form1”).clearForm(includeHidden)

清空當(dāng)前表單中input、select、textarea元素的值。includeHidden設(shè)置決定如何清空隱藏域元素。

a)?????????傳遞true，表示清空表單的所有隱藏域元素。

b)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域

?

9.?????????$.(“form1”).clearFields(includeHidden)?和?$.(“form1”).clearInputs(includeHidden)

作用相同，清空當(dāng)前表單中所有表單元素的指。includeHidden設(shè)置決定如何清空隱藏域元素。

a)?????????傳遞true，表示清空表單的所有隱藏域元素。

b)?????????傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：?$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域

?

10.?????$(“form1”).resetForm()

重置當(dāng)前表單元素，導(dǎo)致所有表單元素重置到它的初始值。

?

11.?????$(“form1”).selected(select)

將當(dāng)前表單元素中所有checkbox、radio設(shè)置為select。select參數(shù)為布爾值。

?

?

?

?????????本文到此結(jié)束，通過此博文相信各位，

1.?????????再也不會(huì)去寫齷齪的同步提交和使用aspx進(jìn)行異步相應(yīng)了。

2.?????????再也不用煩惱表單提交過程中各個(gè)控件的值如何獲取的問題，并且通過jQuery.form表單插件輕松實(shí)現(xiàn)表單異步提交、文件上傳及進(jìn)度條顯示。

3.?????????清楚的認(rèn)識(shí)了jQuery.form表單在給我們提供便利的背后到底做了什么手腳(源碼分析)。

?

?

?????????感謝大家的收看，感覺不錯(cuò)還請(qǐng)多幫推薦…推薦…推薦……

?

?

?

作者：滴答的雨
出處：http://www.cnblogs.com/heyuquan/
本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。

總結(jié)

以上是生活随笔為你收集整理的【转】4.2使用jQuery.form插件，实现完美的表单异步提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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