Heim > Web-Frontend > js-Tutorial > jQuery Validator überprüft die Ajax-Formularübermittlungsmethode und die Ajax-Parameterübergabemethode (Bild- und Text-Tutorial)

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

亚连
Freigeben: 2018-05-22 10:18:48
Original
1786 Leute haben es durchsucht

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) { 
        } 
      });
Nach dem Login kopieren

verwendet die Parameterübergabemethode von serialize() 

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

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); 
} 
} 
}); 
});
Nach dem Login kopieren

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; 
     } 
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage