Jquery李炎恢——51Ajax表单插件【17】

学习要点:

1.核心方法

2.option参数

3.工具方法

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

一、核心方法

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

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

//ajaxForm提交方式

$("#reg").ajaxForm(function(){

    alert("提交成功！")；

});

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

//ajaxSubmit()提交方式

$("#reg").submit(function(){

    $(this).ajaxSubmit(function(){

        alert("提交成功！")；

    });

    return false;

});

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

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

$("#reg").submit(function(){

   $(this).ajaxSubmit({

       url:"test.php",          //设置提交的url，可覆盖action属性

       target:"#box",          //服务器返回的内容存放在#box里

       type:"POST",           //GET,POST

       dataType:null,          //xml,json,script,默认为null

       clearForm:true,        //成功提交后，清空表单

       resetForm:true,        //成功提交后，重置表单

       data:{                        //增加额外的数据提交

            aaa:"bbb",

            ccc:"ddd",

       },

       beforeSubmit:function(formData,jqForm,options){

            alert(formData[0].name);      //得到传递表单元素的name

            alert(formData[0].value);      //得到传递表单元素的value

            alert(jqForm);                       //得到form的jquery对象

            alert(options);                       //得到目前options设置的属性

            alert("正在提交中！")

            return  true;      

       },

       success:function(responText,statusText){

           alert(responseText+statusText);      //成功后回调

       },

       error:function(event,errorText,errorType){     //错误时调用

           alert(errorText+errorType);

        },

    });

    return false;

});

三、工具方法
form.js除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。
//表单序列化
alert（$("#reg").formSerialize()）;
 
//序列化某一个字段
alert($("#reg #user").fieldSerialize());

//得到某个字段的value值
alert($("#reg #user").fieldValue());

//重置表单
$("#reg").resetForm();

//清空某个字段

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