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

转载 2016年08月28日 19:25:34

学习要点:

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

Jquery李炎恢——15表单选择器

学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用Jquery为表单专门提...

Jquery李炎恢——47,48,49验证插件【13】【14】【15】

学习要点: 1.使用validate.js插件 2.默认验证规则 3.validate()方法和选项 4.validate.js其他功能 验证插件(validate.js),是一款验证常规表单数据...

Jquery李炎恢——16,17基础事件

学习要点: 1.绑定事件 2.简写事件 3.复合事件 javaScript有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jquery为开...

李炎恢jQuery笔记7表单选择器

val(); //选择type 为password 的字段 $('input[name=user]').val(); //选择name 为user 的字段 那么对于id 和类(class)用法比较...

Jquery李炎恢——29,30Ajax进阶

学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON和JSONP 在Ajax课程中,我们了解了最基本的异步处理方式。本章,我们将了解一下Ajax的一些全局请求事件、跨域处理和其...

Jquery李炎恢——26,27,28Ajax

学习要点: 1.Ajax概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 Ajax...

Struts2之ajax提交表单(借助jquery插件)

1 index.jsp pageEncoding="UTF-8"%>         $(document).ready( function() {                  ...

使用 jQuery Form 插件 Ajax 提交表单

问题描述 在 Web 开发中,使用 Ajax 来提交表单,比如注册页面的注册信息表单的时候,经常遇到一个令人头疼的问题:用户名或 Email 经常要用到 Ajax 异步提交到后台判断。触发这一事...

Jquery李炎恢——18,19事件对象

学习要点: 1.事件对象 2.冒泡和默认行为 javaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容性方面的处理。jquery在封装...

Jquery李炎恢——23,24,25动画效果

学习要点: 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用flash在进行。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery李炎恢——51Ajax表单插件【17】
举报原因:
原因补充:

(最多只允许输入30个字)