jquery表单插件 ---form

jquery Form插件是一个优秀的Ajax表单插件，可以非常容易的、无侵入滴升级html表单以支持Ajax。jQUery Form有两个核心方法——ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到如何管理提交进程的功能。另外插件还有一些其它的方法：formToArray(),formSerialize(),fieldSerialize(),fieldValue(),clearFrom(),clearFialds()和resetForm()等。

下载地址：点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/jquery.form.js"></script>
</head>
<body>
    <form id="form">
        <input type="file" enctype="multipart/form-data" method ="post"/>
    </form>

    <form id="form_submit">
        账号：<input type="text" name="name"/><br/>
        密码：<input type="password" name="password"/><br/>
        <input type="submit" id="submit_test" value="提交"/>
    </form>
</body>
</html>

上述代码通过核心方法ajaxForm(),很容易将表单提升为ajax提交方式。

<script type="text/javascript">
    $("#form_submit").ajaxForm(function () {
        alert("登陆成功！！！");
    })
</script>

form插件还有一个核心方法ajaxForm()，也能完成同样功能。

 $("#form_submit").ajaxSubmit(function () {
        alert("登陆成功！！！");
    })

ajaxForm()方法和ajaxSubmit()方法参数

ajaxForm()方法和ajaxSubmit()方法都能接收0个或1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个 options 对象。上面就是参数是回调函数的例子，下面介绍 options 对象。

首先定义一个对象 options，然后在对象里设置参数。如：

    var options = {
        target : "#output1",            //把服务器返回的内容放入 id 为 output 的元素中
        beforeSubmit : showRequest,     //提交前的回调函数
        success : showResponse,         // 提交后的回调函数
        url : url,                      //默认是form的action ，如果声明则会覆盖
        type : type ,                   //默认是form的method，如果声明则会覆盖
        dataType : null,                //'xml'、‘script’、‘json’（接受服务器端的返回类型）
        clearForm : true,               //成功提交后，清除所有表单元素的值
        resetForm : true,               //成功提交后，重置所有表单元素的值
        timeout : 3000                  //限制请求时间，请求大于3秒后，跳出请求
 };

定义了 options对象之后，就可以把这个 options对象传给ajaxForm()方法。如

$("#form_submit").ajaxForm(aptions);

或者传递给ajaxSubmit()方法。如：

$("#form_submit").ajaxSubmit(aptions);

在 options 里指定了两个回调函数，即beforeSubmit :showRequest 和 success：showResponse.他们分别表单提交前和提交后被调用。

beforeSubmit ——提交前的回调函数

    function showRequest(formData,jqForm,options){
        var queryString = $.param(formData);
        return true;
    }

这个回调函数有3个参数。

第一个 formData 是数组对象，使用$.param()方法把爱转化为字符串，得到如下这种格式：

name=tom&address=2

需要注意的是，当表单提交时 form 插件会议ajax方式自动提交这些数据。

第二个参数 jqForm 是一个jquery对象，它封装了表单元素。

如果要访问 jqForm 的 DOM 元素，可以吧 jqForm 转为 DOM 对象。

    var formElement = jqForm[0];
    var address = formElement.address.value;

第三个参数 options 就是 option 对象。前面已经声明了 options 对象里的一些属性，其他没有声
明的，则会使用默认属性。

在这个表单中，只要不返回 false ，表单都被允许提交；如果返回 false ，则会阻止表单提交。可以
利用这个特性，在表单提交之前验证数据，如果不符合验证条件，则组织表单提交。

success——提交后的回调函数

提交后的回调函数：

    function showResponse(responseText,statusText,xhr,$form) {
        alert("状态："+statusText+"\n 返回内容是：\n"+responseText);
    }

success 有四个参数：responseText、statusText、xhr、$form。其中 responseText 和 statusText 2个比较常用。

statusText 只是返回一个状态，例如 success error邓。

responseText 携带者服务器返回的数据内容。responseText 会根据设置的 options 对象中的 dataType 属性来返回相应格式的内容。具体情况如下：

（1）：对于缺省的 HTML 返回，回掉函数的提一个参数是 XMLHttpRequest 对象的 responseText 属性。

（2）：当 dataType 属性设置为 xml 时，回掉函数的第一个参数是 XMLHttpRequest 对象的 responseXML 属性。

    $("#form_submit").ajaxForm({
        dataType : 'xml',
        success : processxml
    });
    function processxml(responseXML) {
        var name = $('name',responseXML).text();
        var address = $('address',responseXML).text();
    }

（3）：当 dataType 属性设置为 json 时，回掉函数的第一个参数是从服务器返回的 json 数据对象。

    $("#form_submit").ajaxForm({
        dataType : 'json',
        success : processJson
    });
    function processJson(data) {
        $("#output1").html(data.name+"  "+data.address);
    }

jquery表单插件 ---form

success——提交后的回调函数

猜你喜欢