jquery form 的beforeSubmit提交前的回调函数
ajaxForm()和ajaxSubmit()方法可以接受0个或1个参数,当为单个参数时,该参数可以是一个回调函数,也可以是一个options对象。以下是一个options对象. var options={ target:'#output1', //把服务器返回内容放入id为output1的元素中 beforeSubmit:showRequest, //提交前的回调函数 success:showResponse, //提交后的回调函数 //url:url, //默认是form的action,如果申明,则会覆盖 //type:type, //默认是form的method('get' or 'post'),如果申明,则会覆盖 //dateType:null, //'xml','script',or 'json'(接受服务端返回的类型) //clearForm:true, //成功提交后,清除所有表单元素的值 //resetForm:true, //成功提交后,重置所有表单的值 //timeout:3000 //限制请求的时间,当请求大于3秒后,跳出请求 }定义上面options后,就可以把此对象传递给ajaxForm()方法, $("#myForm").ajaxForm(options); 或是 $("#myForm").submit(function(){$(this).ajaxSubmit(options);return false; });在以上options中指定了两个回调函数,即beforeSubmit:showRequest和success:showResponse 各函数参数如下: funtion showRequest(formData,jqForm,options){var queryString = $.param(formData);return true; } 此回调函数有三个参数. 第1个参数formdata是数组对象[{name:myname},{value:myvalue}],在这里,使用$.param()方法把它转化为字符串,得到类似"name=1&address=2",需要注意的是当表单提交时,form插件会以Ajax的方式自动提交这些数据. 第2个参数jqForm是一个jQuery对象,它封装了表单的元素,如果需要访问jqForm的dom元素,可以把jqForm转换为DOM对象。 var formElement = jqForm[0]; var address = formElement.address.value; 第3个参数options就是options对象,前面已经声明了options对象里的一些属性,其它没有声明的,则会使用默认的属性。 在这个回调函数中,只要不返回false,表单都将被允许提交,如果返回false,则会阻止表单提交,可以利用这个特性,在表单提交前验证数据,如果不符合验证规则,则阻止表单提交。 以下讲三种表单验证方式:a,利用参数formData,formData是一个数组对象,数据格式如下:[{name:name,value:nameValue},{name:password,value:passwordValue}] 由于是数组,可循环来获取每个元素的值,然后判断元素的值是否符合验证规则(这里只判断元素是否为空),如果有一项不符合验证规则,就返回false,来阻止表单提交,代码如下: function validate(formData,jqForm,options){ for(var i =0;i<formData.length;i++){ if(!formData[i].value){ alert('用户名,地址和自我介绍都不能为空!'); return false; } } var queryString = $.param(formData); return true; }b,利用jqForm,不仅可以利用第一个参数formData来获取表单数据,而且可以用第二个参数jqForm来达到同样的效果. 参数jqForm是一个jQuery对象,它封装了表单的元素,如果需要访问jqForm的DOM元素,可以把jqForm转为DOM对象。 var form = jqForm[0]; 然后通过form.name.value来获取用户名的值;通过form.address.value来获取地址的值. 代码如下: function validate(formData,jqForm,options){ var form = jqForm[0]; if(!form.name.value || !form.address.value){ alert('用户名和地址不能为空,自我介绍可以为空!'); return false; } var queryString = $.param(formData); return true; }c:利用fieldValue()方法 fieldValue()方法会把匹配元素的值插入到数组中,然后返回这个数组,如果表单元素的值被判定无效,则数组为空,否则数组将包含一个或多个元素的值,由于返回的是一个数据,而不是jQuery对象,因此不能进行链式操作。 利用fieldValue()方法,也能很容易地获取到表单元素的值,例如可以通过$("input[name=address]").fieldValue()来获取name为address的input元素的值的“数组集合”。然后通过数组下标来获取数组中对应的值。 代码如下: function validate(formData,jqForm,options){ var usernameValue = $('input[name=name]').fieldValue(); var addressValue = $('input[name=address]').fieldValue(); if(!usernameValue[0] || !addressValue[0]){ alert('用户名和地址不能为空,自我介绍可以为空!'); return false; } var queryString = $.param(formData); return true; }sussess……提交后的回调函数: function showResponse(responseText,statusText){alert('状态:'+statusText+'\n 返回的内容是:\n'+responseText); } statusText只是一个返回状态,如:success,error等. responseText携带着服务器返回的数据内容,responseText会根据设置的options对象中的dateType属性来返回相应格式的内容.具体情况如下。 1,对于缺省的html返回,回调函数的第一个参数是XMLHttpRequest对象的responseText属性; 2,当dataType属性被设置为xml时,回调函数的第一个参数是XMLHttpRequest对象的responseXML属性; 例如声明服务器返回数据的类型为xml,然后以XML方式解析数据,代码如下: $("#xmlForm").ajaxForm({ dataType:'xml', success:processXml });function processXml(responseXML){var name = $('name',responseXML).text();var address = $('address',responseXML).text();$("#xmlOut").html(name+" "+address); }3,当dataType属性被设置为json时,回调函数的第1个参数是从服务器返回的json数据对象,如: $('myForm').ajaxForm({ dataType:'json', success:processJson }); function processJson(data){$('#jsonOut').html(data.name+' ' + data.address); }
转载于:https://www.cnblogs.com/fpc-syq/p/9049910.html
jquery form 的beforeSubmit提交前的回调函数相关推荐
- jquery form表单提交成功,回调方法
先下载 jquery-form.js [#assign security=JspTaglibs["http://www.springframework.org/security/tags&q ...
- html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
- 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
- jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJ ...
- jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
- form表单提交前进行ajax或js验证,校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
- JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...
- Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
最新文章
- 基于@AspectJ配置Spring AOP之一--转
- bose蓝牙音箱使用说明_身轻如燕好带走 时尚便携蓝牙音箱TOP5推荐
- deepin v20.2.4设置全局搜索的快捷键
- P2P的原理和常见的实现方式
- React 入门学习笔记2
- java pecs_Java 泛型: 什么是PECS(Producer Extends, Consumer Super)
- -rw-r--r--@ what's @
- SpringBoot2 Spring Cloud consul 分布式配置中心使用教程
- Oracle数据库常用脚本
- 深入浅出设计模式之状态模式、代理模式
- 公差带与配合 常用基孔(轴)制基准公差数值
- 电脑上怎么批量压缩图片?如何快速批量压缩图片?
- Android播放音频到耳机,Android应用开发之android插入耳机状态使用扬声器外放音乐...
- 2020UNCTF-MISC-网络深处1
- lisp 焊接符号标注_焊接符号标注及表示方法-详解aws焊接符号、钢结构焊接符号含义大全...
- 手把手指导制作一个 WebAR 与小程序 AR
- Chrome插件安装及程序包无效的解决方法
- Linux 上安装iib 9.0
- git克隆指定分支的代码
- 读图书版 《走出软件作坊》