jQuery Validator überprüft die Ajax-Formularübermittlungsmethode und die Ajax-Parameterübergabemethode (Bild- und Text-Tutorial)

In diesem Artikel wird hauptsächlich die Methode des jQuery-Validators zur Überprüfung des Ajax-Übermittlungsformulars und die Methode zum Übergeben von Ajax-Parametern vorgestellt. Der Artikel erwähnt auch, wie das jQuery-Ajax-Übermittlungsformular geschrieben wird

serialize() erstellt eine URL-codierte Textzeichenfolge durch Serialisierung von Formularwerten. Anstatt Parameter einzeln zu übergeben

Die zuvor geschriebene Ajax-Parameterübergabemethode

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

verwendet die Parameterübergabemethode von serialize() 

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

Wenn wir uns in etwas etwas Komplexem befinden Situationen Im Geschäftsleben kann es vorkommen, dass Sie mehrere Formulare auf derselben Seite benötigen, die Seite jedoch nach dem Absenden eines Formulars nicht aktualisiert oder springen soll. Dann betrachten wir die Ajax-Übermittlung des Formulars Funktioniert das jQuery-Validator-Plug-in auch mit der Validierung asynchron übermittelter Formulare? Schauen wir weiter nach unten.

Hier werde ich zur Veranschaulichung ein Beispiel aus dem Internet verwenden.

Das Folgende ist eine gebräuchlichere Art, ein jquery .ajax-Übermittlungsformular zu schreiben

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

Wenn Sie Ajax zum Senden des Formulars verwenden möchten, Wenn Sie auch jQuery-Validierung zur Überprüfung verwenden möchten, kann dies wie folgt gelöst werden: Das Formular ist immer noch der normalerweise geschriebene Formularinhalt und der Typ ist immer noch der Übermittlungstyp, aber in der Validierungsmethode nach dem Bestehen der Überprüfung Ajax wird zum Absenden des Formulars verwendet

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Grundsätze domänenübergreifender Ajax-Anfragen (grafisches Tutorial)

dwz So entfernen Sie Ajaxloading (grafisches Tutorial)

Ajax arbeitet mit Node js Multer zusammen, um die Datei-Upload-Funktion zu implementieren

Das obige ist der detaillierte Inhalt vonjQuery Validator überprüft die Ajax-Formularübermittlungsmethode und die Ajax-Parameterübergabemethode (Bild- und Text-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!