jQuery.Form.js 是一個(gè)用于使用jQuery異步提交表單的插件，它使用方法簡(jiǎn)單，支持同步和異步兩種方式提交。

第一步：引入jQuery與jQuery.Form.js

1 <script src="jQuery.1.8.3.js" type="text/javascript"></script> 2 <script src="jQuery.Form.js" type="text/javascript"></script>

第二步：HTML示例代碼

<div id="div1"><form id="form1" method="get" action="#"><p><label for="name">姓名：</label><input type="text" name="name" /></p><p><label for="age">姓名：</label><input type="text" name="age" /></p><p><label for="country">國(guó)家：</label><input type="checkbox" name="country" value="1" />蜀國(guó)<input type="checkbox" name="country" value="2" />魏國(guó)<input type="checkbox" name="country" value="3" />吳國(guó)</p><p><input type="submit" value="確認(rèn)" /></p></form> </div> <div id="div2"></div>

第三步：JS代碼

$(function () {$(":submit").click(function () {var options = {url: "indexAjax.aspx",target: "#div2",success: function (data) {alert(data);}};$("#form1").ajaxForm(options);}) })

第四步：后臺(tái)處理代碼

string strName = Request["name"]; string strAge = Request["age"]; string strCountry = Request["country"]; Response.Clear(); Response.Write("姓名：" + strName + "; 年齡：" + strAge + "; 國(guó)家：" + strCountry); Response.End();

一、jQuery.Form.js 配置選項(xiàng)options

---

選項(xiàng)	說明
url	表單提交數(shù)據(jù)的地址
type	form提交的方式(method:post/get)
target	服務(wù)器返回的響應(yīng)數(shù)據(jù)顯示在元素(Id)號(hào)
beforeSerialize: function($form, options)	表單數(shù)據(jù)被序列化之前執(zhí)行的回調(diào)函數(shù)，如果在內(nèi)部return false將終止序列化和提交。
beforeSubmit: function(arr, $form, options)	表單數(shù)據(jù)被序列化成arr數(shù)組，并且在提交前觸發(fā)的回調(diào)函數(shù)。
error	提交失敗執(zhí)行的回調(diào)函數(shù)
success	提交成功后執(zhí)行的回調(diào)函數(shù)
data	除了表單數(shù)據(jù)外，還需要額外提交到服務(wù)器的數(shù)據(jù)
iframe	如果有<input type="file">是否應(yīng)該使用iframe來上傳文件(對(duì)舊版本瀏覽器而言)
iframeSrc	為<iframe>元素設(shè)定src屬性值
iframeTarget	如果你想用自己的iframe來上傳文件，可以將Id傳給這個(gè)屬性
dataType	期望服務(wù)器返回?cái)?shù)據(jù)類型
clearForm	提交成功后是否清空表單中的字段值
restForm	提交成功后是否重置表單中的字段值，即恢復(fù)到頁(yè)面加載時(shí)的狀態(tài)
timeout	設(shè)置請(qǐng)求時(shí)間，超過該時(shí)間后，自動(dòng)退出請(qǐng)求，單位(毫秒)
forceSync	?
semantic	?
uploadProgress	?

二、可操作函數(shù)

---

函數(shù)	說明
ajaxForm	提交表單 與ajaxSubmit的區(qū)別在于是否觸發(fā)瀏覽器的提交。
ajaxSubmit	提交表單
formSerialize	序列化表單
fieldSerialize	序列化字段
fieldValue	返回某個(gè)input的字段值
resetForm	重置表單為打開頁(yè)時(shí)的狀態(tài)
clearForm	清空表單的所有值
clearFields	清空某個(gè)字段值

對(duì)于之前的表單，我們輸入值，然后序列化整個(gè)表單看看

var str = $("#form1").formSerialize(options); alert(str);

?

序列化之后彈出的表單內(nèi)容如下：

當(dāng)然你也可以序列化單一個(gè)字段：

var str = $("input[name=name]").fieldSerialize(options);

?

返回某個(gè)字段值：

var str = $('#form1 input[name=name]').fieldValue();

?

轉(zhuǎn)載于:https://www.cnblogs.com/hgmyz/p/6708512.html

總結(jié)

以上是生活随笔為你收集整理的jQuery.Form.js 异步提交表单使用总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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