详解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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
微信小程序反编译的实现
Dec 10 Javascript
element tree树形组件回显数据问题解决
Aug 14 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中的串行化变量和序列化对象
2006/09/05 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python实现在线翻译功能
2020/03/03 Python
为什么说python适合写爬虫
2020/06/11 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
小学岗位竞聘方案
2014/01/22 职场文书
2014年城管工作总结
2014/11/20 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
法定授权委托证明书
2015/06/18 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android