jQuery.Form.js 异步提交表单使用总结

jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件，它使用方法简单，支持同步和异步两种方式提交。

第一步：引入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">
国家：
</label>
<input type="checkbox" name="country" value="1" />蜀国
<input type="checkbox" name="country" value="2" />魏国
<input type="checkbox" name="country" value="3" />吴国
</p>
<p><input type="submit" value="确认" /></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);
})
})

第四步：后台处理代码

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

一、jQuery.Form.js 配置选项options

选项	说明
url	表单提交数据的地址
type	form提交的方式(method:post/get)
target	服务器返回的响应数据显示在元素(Id)号
beforeSerialize: function($form, options)	表单数据被序列化之前执行的回调函数，如果在内部return false将终止序列化和提交。
beforeSubmit: function(arr, $form, options)	表单数据被序列化成arr数组，并且在提交前触发的回调函数。
error	提交失败执行的回调函数
success	提交成功后执行的回调函数
data	除了表单数据外，还需要额外提交到服务器的数据
iframe	如果有<input type="file">是否应该使用iframe来上传文件(对旧版本浏览器而言)
iframeSrc	为<iframe>元素设定src属性值
iframeTarget	如果你想用自己的iframe来上传文件，可以将Id传给这个属性
dataType	期望服务器返回数据类型
clearForm	提交成功后是否清空表单中的字段值
restForm	提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
timeout	设置请求时间，超过该时间后，自动退出请求，单位(毫秒)
forceSync
semantic
uploadProgress

二、可操作函数

函数	说明
ajaxForm	提交表单 与ajaxSubmit的区别在于是否触发浏览器的提交。
ajaxSubmit	提交表单
formSerialize	序列化表单
fieldSerialize	序列化字段
fieldValue	返回某个input的字段值
resetForm	重置表单为打开页时的状态
clearForm	清空表单的所有值
clearFields	清空某个字段值

对于之前的表单，我们输入值，然后序列化整个表单看看

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

 

序列化之后弹出的表单内容如下：



当然你也可以序列化单一个字段：

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

返回某个字段值：

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