详解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 相关文章推荐
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
js中的this关键字详解
Sep 25 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
Javascript学习指南
Dec 01 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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使用NuSOAP调用Web服务的方法
2015/07/18 PHP
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
详解js树形控件—zTree使用总结
2016/12/28 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python日期操作学习笔记
2008/10/07 Python
python计算文本文件行数的方法
2015/07/06 Python
django文档学习之applications使用详解
2018/01/29 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
标准化管理实施方案
2014/02/25 职场文书
社会发展项目建议书
2014/08/25 职场文书
医院领导班子整改方案
2014/10/01 职场文书
三年级学生评语大全
2014/12/26 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js