关闭

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

96人阅读 评论(0) 收藏 举报

学习要点:

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();

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6310次
    • 积分:287
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:56篇
    • 译文:0篇
    • 评论:0条
    文章分类