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

相关文章推荐

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

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

使用 jQuery Form 插件 Ajax 提交表单

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

表单实时校验插件——jquery.validateForm.js(v.2.0)

插件名:jquery.validateForm.js 依赖:  jquery ,  jquery.validateForm.css 参数: 暂无参数(有一个默认的msg提示) 说明: 实现了input...
  • vuturn
  • vuturn
  • 2015-12-31 16:08
  • 1758

分享一个快速将传统表单转化为AJAX支持的表单的jQuery插件 - ALAJAX

日期:2012-5-23  来源:GBin1.com 在线演示  本地下载 今天我们介绍一个非常方便将传动表单递交方式自动转化为AJAX递交方式的jQuery插件 - ALAJ...
  • jjfat
  • jjfat
  • 2012-06-11 15:10
  • 523

jQuery验证表单插件——jquery-validation

jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your ...

jquery插件——form表单插件

传统的表单提交,都是页面跳转的形式,但是现在更流行ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?怎么使用两种使用方式:第一种 ...

Jquery——Day7(Ajax提交表单)

1、创建数据库 名称为“zhiwen”,表为id、user、pass、email、sex、birthday、date 创建php文件:config.php、add.php、is_user.php (1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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