详解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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JavaScript中的Function函数
Aug 27 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
js字符串转成JSON
2013/11/07 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
tab栏切换原理
2017/03/22 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
python之wxPython应用实例
2014/09/28 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python能开发游戏吗
2020/06/11 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
《乞巧》教学反思
2014/02/27 职场文书
老干部工作先进事迹
2014/08/17 职场文书
商场父亲节活动方案
2014/08/27 职场文书
暑假社会实践心得体会
2014/09/02 职场文书