表单插件form（如何调用jQuery插件学习第二天）

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                //设置请求时间，超过改时间后，自动退出请求(单位：毫秒)
}

表单插件form（如何调用jQuery插件学习第二天）

猜你喜欢