详解javascript表单的Ajax提交插件的使用


Posted in Javascript onDecember 29, 2016

Ajax 提交插件

form.js 表单的下载地址:官方网站: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()方法的,所以需要手动阻止默认行为。

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 (responseText, statusText) {


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

},

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


 alert(errorText + errorType);


},

});

return false;
});

工具方法

//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
Node学习记录之cluster模块
May 31 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
js实现日历
Nov 07 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
基于javascript的Form表单验证
Dec 29 #Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 #Javascript
bootstrap导航条实现代码
Dec 28 #Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
You might like
PHP中的正规表达式(二)
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
div层的移动及性能优化
2010/11/16 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
医学生求职自荐信
2013/10/25 职场文书
办理暂住证介绍信
2014/01/11 职场文书
主题党日活动总结
2014/07/08 职场文书
小学师德师风整改措施
2014/10/27 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
单位病假条范文
2015/08/17 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS