Detaillierte Beispiele, wie jQuery Validator die Übermittlung von Ajax-Formularen überprüft und wie Ajax Parameter übergibt

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. Den spezifischen Beispielcode finden Sie in diesem Artikel . Ich hoffe, es kann Ihnen helfen. Die Methode

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

Die in der Vergangenheit 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) { 
        } 
      });

Verwendung der Parameterübergabemethode serialize()      

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

Wenn wir in einigen etwas komplexen Unternehmen tätig sind, Es kann Situationen geben, in denen mehrere Formulare auf derselben Seite erforderlich sind, Sie jedoch nicht möchten, dass die Seite nach dem Absenden eines Formulars aktualisiert wird. Dann betrachten wir die Ajax-Übermittlung des Formulars Kann das Plug-in auch asynchrone Übermittlungen verarbeiten? Was ist mit der Formularvalidierung? Schauen wir weiter nach unten.

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

Das Folgende ist eine gebräuchlichere Methode zum Schreiben eines jquery .ajax-Übermittlungsformulars

$("#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 und auch die Validierung von jquery zur Überprüfung verwenden möchten, dann Sie können es wie folgt lösen: form Der Formularinhalt wird immer noch normal geschrieben und der Typ ist immer noch der Übermittlungstyp, aber in der Validierungsmethode wird Ajax zum Senden 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; 
     } 
});

Verwandte Empfehlungen:

BootStrap Validator-Überprüfungsmethode

Hinweise zur Verwendung von BootStrap Validator (unbedingt lesen)

Parse die dynamische Parameterübertragung und dynamische Attribute von Javascript.

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele, wie jQuery Validator die Übermittlung von Ajax-Formularen überprüft und wie Ajax Parameter übergibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!