详解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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
JavaScript中的其他对象
Jan 16 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
js opener的使用详解
Jan 11 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
基于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 计划任务 检测用户连接状态
2012/03/29 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
javascript实现简易计算器
2017/02/01 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
Python pymongo模块用法示例
2018/03/31 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
工作感想范文
2015/08/07 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技