Comment vérifier les paramètres du formulaire de soumission Ajax avec jQuery-js tutoriel-php.cn

Comment vérifier les paramètres du formulaire de soumission Ajax avec jQuery

php中世界最好的语言

Libérer： 2018-03-31 11:04:16

original

1422 Les gens l'ont consulté

Cette fois, je vais vous montrer comment jQuery vérifie les paramètres transmis dans le formulaire de soumission Ajax. Quelles sont les précautions pour que jQuery vérifie les paramètres transmis dans le formulaire de soumission Ajax. , jetons un coup d'oeil. La méthode

serialize() crée un texte codé en URL string en sérialisant la valeur du formulaire. Au lieu de passer les paramètres un par un

La méthode de passage des paramètres ajax écrite dans le passé

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

Copier après la connexion

utilise la méthode de passage des paramètres de serialize()

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

Copier après la connexion

Quand nous sommes Dans certaines entreprises légèrement complexes, vous pouvez rencontrer des situations où vous avez besoin de plusieurs formulaires sur la même page, mais vous ne voulez pas que la page s'actualise ou saute après avoir soumis un formulaire, donc ce que nous considérons est Soumission Ajax du formulaire. , alors comment le plug-in validator de jQuery peut-il également valider les formulaires soumis de manière asynchrone ? Continuons à regarder vers le bas.

Ici, j'utiliserai un exemple tiré d'Internet pour illustrer.

Ce qui suit est une manière plus courante d'écrire la soumission de formulaire jquery .ajax

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

Copier après la connexion

Si vous souhaitez utiliser ajax pour soumettre le formulaire, vous souhaitez également utiliser le validate de jQuery qui peut être utilisé pour vérifier, il peut donc être résolu comme ceci : le formulaire est toujours le contenu du formulaire normalement écrit, et le type est toujours le type de soumission, mais dans la méthode après la validation est réussi, ajax est utilisé pour soumettre le formulaire

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment télécharger des fichiers avec ajax sans actualiser

Comment le faire avant qu'Ajax ne renvoie des données effet d'animation en attente

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!