知问前端——Ajax表单插件

传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js表单的Ajax提交插件将解决这个问题。

一、核心方法

官方网站：http://malsup.com/jquery/form/

form.js插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。

若没有结合其他插件、js、jQuery里的submit()方法时，就用ajaxForm()提交表单。

若用js、jQuery里的submit()方法时，就采用submit()方法。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="box"></div>
    <form id="reg" action="123.html">
        <p class="myerror"></p>
        <p>账号：<input type="text" name="user" id="user" /></p>
        <p>密码：<input type="text" name="pass" id="pass" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

style.css：

.valid {
    background: url(img/reg_succ.png) no-repeat right;
}
.abc {
    border: 5px solid green;
}

jQuery代码如下：

$("#reg").ajaxForm(); //ajaxForm自动阻止了默认提交
$("#reg").submit(); //直接跳转

若此时<form>表单修改为：

<form id="reg" method="post" action="add.php">
    <p class="myerror"></p>
    <p>账号：<input type="text" name="user" id="user" /></p>
    <p>密码：<input type="text" name="pass" id="pass" /></p>
    <p><input type="submit" value="提交" /></p>
</form>

add.php：

<?php
    echo 'add.php';
?>

1.ajaxForm提交方式：

//ajax()中success:function() {}就是这里的function
$("#reg").ajaxForm(function() {
    alert("提交成功！");
});

如何证明ajaxForm()中的function就是ajax()中success:function() {}呢？只须将add.php修改为：

<?php
    sleep(3);
    echo 'add.php';
?>

使其睡眠3秒钟，然后回复给浏览器，成功返回，弹出“提交成功”对话框。

注意：使用ajaxForm()方法，会直接实现ajax提交。自动阻止了默认行为，而它提交的默认页面是form控件的action属性的值，提交的方式是method属性的值。

2.ajaxSubmit()提交方式

使用submit()提交时，由于会直接跳转，即submit()方法没有阻止默认提交，所以需要自行阻止，代码如下：

$('#reg').submit(function () {
    ....
    return false;
});

$("#reg").submit(function() {
    $(this).ajaxSubmit(); //达到的效果如同$("#reg").ajaxForm();
    $(this).ajaxSubmit(function() {  //达到的效果也如同$("#reg").ajaxForm(function() { alert("提交成功！"); });
        alert("提交成功！");
    }); //执行的也是ajax()中success方法
    return false; //submit()方法没有阻止默认提交，需要自行阻止
});

注意：ajaxForm()方法，是针对form直接提交的，所以阻止了默认行为。而ajaxSubmit()方法，由于是针对submit()方法的，所以需要手动阻止默认行为。而使用了validate.js验证插件，那么ajaxSubmit()比较适合我们。

二、option参数

option参数是一个以键值对传递的对象，可以通过这个对象，设置各种Ajax提交的功能。

$("#reg").submit(function() {
    $(this).ajaxSubmit({
        url:"test.php", //设置提交的url，可覆盖action属性
        target:"#box", //服务器返回的内容存放在#box里
        type:"get", //GET,POST两种提交方式
        dateType:null, //xml,json,script，默认为null，但经测试null和"html"均可用
        //clearForm:true, //成功提交后，清空表单
        //resetForm:true, //成功提交后，重置表单
        data:{
            aaa:"bbb" //增加额外的数据提交
        },
        beforeSubmit: function(formData,jqForm,options) {
            //提交之前执行，一般用于数据验证
            //alert(options.url); //test.php
            //alert(jqForm.html()); //返回<form id="reg"></form>里面的html内容
            //alert(formData[0].name); //得到传递表单元素的name，即user
            //alert(formData[0].value); //得到传递表单元素的value，即输入的值
            //如果数据验证不合法，就返回false，不让提交，返回true让提交，默认返回true
            return true;
        },
        //成功后回调
        success:function(responseText,statusText) {
            //alert("提交成功！");
            alert(responseText + " " + statusText);  //为何返回0 [object HTMLDivElement]?，应该返回test.php success
        },
        //错误时调用
        error:function(event,errorText,errorType) {
            //alert("错误！");
            alert(errorText + " " + errorType); //error Not Found
        }
    });
    return false; //submit()方法没有阻止默认提交，需要自行阻止
});

三、工具方法

form.js除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。

1.表单序列化：

alert($('#reg').formSerialize());

2.序列化某一个字段：

alert($('#reg #user').fieldSerialize());

3.得到某个字段的value值：

alert($('#reg #user').fieldValue());

4.重置表单：

$('#reg').resetForm();

5.清空某个字段：

$('#reg #user').clearFields();