JQuery Validator Verifies Ajax Form Submission Method and Ajax Reference Method

Time:2019-9-15

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

The way of ajax data transmission 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) { 
        } 
      }); 

Using serialize () as a parameter


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

When we are in a slightly complex business, we may encounter situations where multiple forms are required on the same page, but we don’t want to refresh or jump the page after submitting a form. So what we consider is that Ajax submits the form, so how to let jQuery’s validator plug-in also progress the form submitted asynchronously? What about line validation? Let’s keep looking down.

Here, I will use an example of the network to illustrate.

Here’s a more common way to write jquery. Ajax submission forms

$("#submitButton").click(function(){ 
// Serialized forms 
  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 { 
// The returned results are converted into JSON data 
var jsonObj = eval('('+result+')'); 
startTime = $("#startdate").val(); 
endTime = $("#enddate").val(); 
hour = jsonObj.hour; 
reason = jsonObj.reason; 
 
replaceDom(startTime,endTime,hour,reason); 
} 
} 
}); 
});

If you want to submit a form with Ajax and verify it with jquery’s validate, you can solve this problem: the form is normally written form content, the type is submit type, but submit the form using Ajax in the validate validation method

$("#saveWorkExtra").validate({ 
Onsubmit: true, // is validated on submission 
Onfocusout: false, // verify when getting focus 
Onkeyup: false, // whether to verify when typing on the keyboard 
rules: { 
.... 
}, 
messages:{ 
.... 
}, 
SubmitHandler: function (form) {// callback after passing 
   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) {// without callback 
    return false; 
     } 
});

summary

The above is jQuery Validator’s method of validating Ajax’s submission form and Ajax’s method of transmitting data. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to developpaer.

Recommended Today

Typescript official manual translation plan [v]: object type

explain: at present, there is no Chinese translation of the latest official documents of typescript on the Internet, so there is such a translation plan. Because I am also a beginner of typescript, I can’t guarantee the 100% accuracy of translation. If there are errors, please point them out in the comment area; Translation content: […]