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传参的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"

  • asp.net ajaxControlToolkit ValidatorCalloutExtender的简单用法

    此控件是asp.net中的验证控件 RequiredFieldValidator , RangeValidator, RegularExpressionValidator, CompareValidator, CustomValidator,ValidationSummary的错误验证信息呼出的一个扩展控件 主要作用是把未通过验证的信息通过一个突出的层显示给用户. 主要属性: <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCallou

  • jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

    query formValidator插件非常好用,但是有一个严重的Bug,在使用ajax验证的时候,如果输入框的内容已经存在,把鼠标放到输入框,不做任何修改再离开,则会提示错误, 这是这个插件犯的一个很愚蠢的错误 复制代码 代码如下: oneIsValid: function(id, index) { var returnObj = new Object(); returnObj.id = id; returnObj.ajax = -1; returnObj.errormsg = ""

  • formValidator3.3的ajaxValidator一些异常分析

    ajaxvalidator是大家问的最多的问题,修正一个bug(感谢网友"じ龍峸√"),并把大家最关心的问题,再做一次阐述. bug现象:无论校验有没有校验通过,当控件再次得到焦点而再次失去焦点的时候tip里的提示就会停滞在得到焦点的提示 历次升级的相关记录: a.为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面) 为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug,插件将自动在url后面自动添加,形式为&qu

  • formvalidator验证插件中有关ajax验证问题

    jquery formvalidator插件是不错的国产验证插件了,做点普通的校验也是很方便的,但最近遇到个问题,发现如果表单整个表单是AJAX提交时,就不能按传统的做法了,比如: 复制代码 代码如下: $ajax.post("...............") $.formValidator.initConfig({formID:"applyForm",onError:function(msg){alert(msg)}}); $("#reason&quo

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

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串.代替了一个一个传参的方式 以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", dataType : "json", data: {beginsectionid:function(){ return $('#number

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • jQuery使用$.ajax提交表单完整实例

    本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jquery实现ajax提交表单信息的简单方法(推荐)

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

  • JQuery通过Ajax提交表单并返回结果

    JQuery通过Ajax提交表单并返回结果

    如下: 1:非Ajax 前台: 对应后台: 2:JQuery之Ajax 在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有: 功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON. 首先,我们假设返回的JSON实体为: 复制代码 代码如下: public class LoginResult

  • ajax提交url与ajax提交表单的详细比较

    1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交. 例: 复制代码 代码如下: function createHtml(id){             $("#reloading").show();              //edit_bg是个div,提交时显示,这样可以使背景页面不能操作.             $("#edit_bg").show();             $.ajax({             type

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • Ajax提交表单并接收json实例代码

    需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com

  • Lavarel框架中使用ajax提交表单的方法

    laravel简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力."开发"应当是一项富有创造性的脑力劳动,而不是枯燥的"垒代码". 开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加. 在网上看了很多的解决方式

随机推荐