详解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 EXCEL 操作类代码
Jul 30 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
javascript实现密码验证
Nov 10 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vuex存值与取值的实例
Nov 06 Javascript
JS+DIV实现拖动效果
Feb 11 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
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
菜单效果
2006/10/14 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery中ready事件用法实例
2015/01/19 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
cookie的secure属性详解
2015/04/08 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
教师党员个人整改措施
2014/10/27 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
二手房购房意向书
2015/05/09 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS