Detailed examples of how jQuery Validator verifies Ajax form submission and how Ajax passes parameters-PHP Tutorial-php.cn

Detailed examples of how jQuery Validator verifies Ajax form submission and how Ajax passes parameters

小云云

Release： 2023-03-18 11:26:01

Original

1730 people have browsed it

This article mainly introduces the method of jQuery Validator to verify the Ajax submission form and the method of Ajax passing parameters. The article also mentions how to write the jquery .ajax submission form. Please refer to this article for specific example codes. I hope it can help you. .

The serialize() method creates a URL-encoded text string by serializing form values. Instead of passing parameters one by one.

Ajax parameter passing method written in the past

$.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) { 
        } 
      });

Copy after login

Use the parameter passing method of serialize()

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

Copy after login

When we are in some slightly complex businesses, we may encounter needs When multiple forms are on the same page, but you don’t want the page to refresh or jump after submitting a form, then what we consider is Ajax submission of the form. So how can jQuery’s validator plug-in also validate asynchronously submitted forms? ? Let's continue reading.

Here, I will use an example from the Internet to illustrate.

The following is a relatively common way of writing jquery .ajax submission form

$("#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); 
} 
} 
}); 
});

Copy after login

If you want to use ajax to submit the form and also want to use jquery's validate for verification, then you can solve it like this: the form is still normal The type of the written form content is still the submit type, but ajax is used to submit the form in the validate method after passing the verification

$("#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; 
     } 
});

Copy after login

Related recommendations:

BootStrapValidator verification method

Notes on using BootStrap Validator (must read)

Analyze the dynamic parameter transfer and dynamic properties of javascript.

The above is the detailed content of Detailed examples of how jQuery Validator verifies Ajax form submission and how Ajax passes parameters. For more information, please follow other related articles on the PHP Chinese website!