form插件是专门为页面的表单而设计的,引入该插件后,通过调用ajaxForm()或ajaxSubmit()两个方法,可以很容易地实现Ajax方式提交数据,并通过方法中的options对象设置参数,获取服务器返回的数据。同时,该插件还包含如下一些重要方法。
(1)formSerialize():用于格式化表单中有用的数据,并将其自动整理成合适Ajax异步请求的URL地址格式。
(2)clearForm():清除表单中所有输入值的内容。
(3)restForm():重置表单中所有的字段内容,即将所有表单中的字段内容都恢复到页面加载时的默认值。
form插件的使用:
(1)插件文件:Js-8-2/jquery.form.js
(2)下载地址:http://plugins.jquery.com/project/form
(3)功能描述:
在页面中创建一个ID号为“frmUserInfo”的表单,在表单中新建一个文本框,用于输入“用户名”。新建一个口令文本框,用于输入“密码”,单击“提交”按钮后,将返回的内容显示在ID号为“divData”页面元素中。
(4)代码实现:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-2/jquery.form.js"></script>
<style type="text/css">
....
</style>
<script type="text/javascript">
$(function(){
//定义一个提交表单时的对象
var options = {
//默认为form中的action,设置后便覆盖默认值
url:"Login.aspx",
//将服务器返回的数据显示在ID号为divData元素中
target:"#divData"
}
//以Ajax的方式提交表单
$("#frmUserInfo").ajaxForm(options);
})
</script>
<form id="frmUserInfo" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
用户登录
</div>
<div class="divContent">
<div>
用户名:<br/>
<input id="username" name="username" type="password" class="txt" />
</div>
<div>
密码:<br/>
<input id="userpass" name="userpass" type="password" class="txt" />
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit" value="提交" class="btn" />
</div>
<div id="divData"></div>
</div>
</form>
服务端文件:Login.aspx的代码如下
<%@ Page Language="#C" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["username"]; //姓名符号
string strPass = Request["userPass"]; //密码符号
string strRetValue = "用户名:" + strName + "<br>密码:" +strPass;
Reaponse.Write(strRetValue);
%>
(5)代码分析
在导入form表单插件后,提交数据变得十分轻松,仅仅一行代码:
$("#frmUserInfo").ajaxForm();
这行代码等于如下代码:
$("#frmUserInfo").submit(function(){
$("#frmUserInfo").ajaxSubmit();
return false;
})
表单插件form的ajaxForm()与ajaxSubmit()方法中,可以没有参数,也可以传递1个参数;该参数既可以是一个回调型函数,也可以是一个option对象,通过该对象可以实现更多的页面互动功能。该对象常用的属性如下所示:
var options={
url:url, //form提交数据的地址(url)
type:type, //form提交的方式(method)
target:target, //显示服务器返回数据的元素ID号
beforeSubmit:function(), //提交前执行的回调函数
success:function(), //提交成功后的执行的回调函数
dataType:null, //服务器返回数据类型
clearForm:true, //提交成功后,清空表单中的字段值
restForm:true, //提交成功后,重置表单中的字段值
timeout:6000 //设置请求时间,超过改时间后,自动退出请求(单位:毫秒)
}