当前位置:首页 > 日记 > 正文

jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。代替了一个一个传参的方式

以往写的ajax传参方式

$.ajax({         url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition",         type : "post",         dataType : "json",         data: {beginsectionid:function(){              return $('#number option:selected').val();            },            beginelevation:function(){              return $('#onset').val();            },            endelevation:function(){              return $('#end').val();            }        },         success : function(result) {         }       }); 

用serialize()的传参方式       

 var param = $("#standForm").serialize();        $.ajax({         url : "${ctx}/SJStandardStandardInfo/insertOrUpdateStandardInfo",         type : "post",         dataType : "json",         data: param,         success : function(result) {         }       }); 

当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让jQuery的validator插件也可以对异步提交的表单进行验证呢?我们继续往下看。

在这里,我就用网络上的一个例子来说明好了。

下面是一个比较常见的jquery .ajax提交表单的写法

$("#submitButton").click(function(){ //序列化表单   var param = $("#leaveSave").serialize();   $.ajax({    url : "leaveSave.action",    type : "post",    dataType : "json",    data: param,    success : function(result) { if(result=='success') { location.href='allRequisitionList.action'; } else if(result.startWith("error_")){ $("#errorMessage").html(result.substring(6)); } else { //返回的结果转换成JSON数据 var jsonObj = eval('('+result+')'); startTime = $("#startdate").val(); endTime = $("#enddate").val(); hour = jsonObj.hour; reason = jsonObj.reason;  replaceDom(startTime,endTime,hour,reason); } } }); }); 

如果想用ajax提交表单,还想用jquery的validate进行验证,那么可以这样解决:表单还是正常编写的表单内容,type还是submit类型,只不过在validate验证通过后的方法中使用ajax提交表单

$("#saveWorkExtra").validate({ onsubmit:true,// 是否在提交是验证 onfocusout:false,// 是否在获取焦点时验证 onkeyup :false,// 是否在敲击键盘时验证 rules: { .... }, messages:{ .... }, submitHandler: function(form) { //通过之后回调    var param = $("#saveToWorkExtra").serialize();    $.ajax({ url : "workExtraChange.action", type : "post", dataType : "json", data: param, success : function(result) { if(result=='success') {      location.href='allRequisitionList.action'; } else {      var jsonObj = eval('('+result+')'); } }    });      },      invalidHandler: function(form, validator) { //不通过回调     return false;      } }); 

总结

以上所述是小编给大家介绍的jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

如何通过软件测试访问测试网页的登

如何通过软件测试访问测试网页的登

网页,登录页面,软件测试,测试,电脑软件,如何通过软件测试访问测试网页的登录页面 这次采访多次出现,并再次总结。 具体要求:有2个文本框和一个提交按钮的着陆页。请设计超过30个测试案例。本页 本研究的目的是调查人员是否熟悉各种测试方…

Windows 2003 系统优化小技巧

Windows 2003 系统优化小技巧

系统优化,小技巧,电脑软件,Windows,1. 开机不需要按 CTRL+ALT+DELETE起头菜单->节制面板->打点工具->当地平安设置当地帐户->平安选项找到交互试上岸:不需要按CTRL+ALT+DELETE设置为已启用2. 关机不提醒,关机理由起头 -> 运行 -> gpedit.msc…

将静态照片打造出动态的喷泉效果

将静态照片打造出动态的喷泉效果

照片,动态,喷泉,静态,效果,   本教程介绍水花的动态图制作方法。大致原理:把素材图片复制多份,然后用扭曲滤镜中的海洋波纹滤镜对各图层进行波纹处理,把原图中的水花扭曲一点位置。每一层的参数需要有一点变化,然后连贯起来就看以…

缩短IIS应用池回收时间来实现减少I

缩短IIS应用池回收时间来实现减少I

假死,来实现,时间,电脑软件,IIS,  如果你在使用IIS过程中,出现假死的情况,可以来看看本文是如何来解决的。IIS日志:应用程序:ISAPI 'C:\WINDOWS\system32\inetsrv\asp.dll' 报告它自身有问题,原因如下: 'ASP 不正常,因为执行请求的 100…

javascript计算渐变颜色的实例

javascript计算渐变颜色的实例

计算,渐变,实例,颜色,电脑软件,javascript计算渐变颜色的实例有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算…

js中string之正则表达式replace方

js中string之正则表达式replace方

方法,正则表达式,详解,电脑软件,js,replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法。只不过牵扯到正则的时候比较多一些。需要我们灵活的使用。语法: strinbj.replace(regexp/substr,replacem…

Spring jdbc中数据库操作对象化模

Spring jdbc中数据库操作对象化模

数据库操作,模型,对象,详解,实例,Spring jdbc中数据库操作对象化模型的实例详解Spring Jdbc数据库操作对象化 使用面向对象方式表示关系数据库的操作,实现一个线程安全可复用的对象模型,其顶级父类接口RdbmsOperation. SqlOperation继承该接…

最通俗易懂的javascript变量提升详

最通俗易懂的javascript变量提升详

变量提升,易懂,通俗,详解,电脑软件,如下所示:a = 'ghostwu';var a;console.log( a );在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, 对于上述的例子,你可能会认为第3行代码的输出…

Dreamweaver如何向网页添加音乐

Dreamweaver如何向网页添加音乐

音乐,网页,电脑软件,Dreamweaver,当我们在做网页时,我们会添加你喜欢的音乐,并为你带来今天添加音乐的方式。 软件名称:Adobe Dreamweaver CC 20143264位中文破解安装版(附破解教程)软件大小:320mb更新时间:2014-06-25 1。首先,打开DW软件并构建…

用PHP解决约瑟夫环算法实例

用PHP解决约瑟夫环算法实例

算法,约瑟夫,实例,电脑软件,PHP,本文介绍了用PHP堆栈解决约瑟夫环问题的算法,供大家参考: 约瑟夫环问题:39个犹太人,约瑟夫斯和他的朋友们藏在山洞里,和39个犹太人决定死而不是被敌人抓住。我决定自杀,41人排成一圈,从第一个人开始数,报告数量的每…

Node.js使用orm2进行update操作时

Node.js使用orm2进行update操作时

修改,字段,操作,解决方法,电脑软件,前言最近在工作中遇到一个问题,在使用Orm2进行model修改时,发现当对关联字段进行update操作时,执行了2次SQL,第一次把值改为了我们期望的值,第二次又会把值改回成原来的值。经过调查,当autoFetch开启时,会自动取…

WPS文字中怎么制作联合发文文件头

WPS文字中怎么制作联合发文文件头

文件,文字,方法,发文,电脑软件,  WPS文字中怎么制作联合发文文件头?在WPS文字中,表格工具的作用不仅仅是用来制作表格的。活用表格,有时会收到意想不到的效果,完成一些特殊的任务。下面小编就教你WPS文字中制作联合发文文件头的方法。WPS文…