Exemples détaillés de la manière dont jQuery Validator vérifie la soumission du formulaire Ajax et de la manière dont Ajax transmet les paramètres

Cet article présente principalement la méthode de jQuery Validator pour vérifier le formulaire de soumission Ajax et la méthode de transmission des paramètres Ajax. L'article mentionne également comment écrire le formulaire de soumission jquery .ajax. Veuillez vous référer à cet article pour un exemple de code spécifique. . J'espère que cela pourra vous aider. La méthode

serialize() crée une chaîne de texte codée en URL en sérialisant les valeurs 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) { 
        } 
      });

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

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

Lorsque nous sommes dans des entreprises légèrement complexes, il peut y avoir des situations où plusieurs formulaires sont requis sur la même page, mais vous ne souhaitez pas que la page soit actualisée ou sautée après la soumission d'un formulaire. Ensuite, ce que nous considérons est la soumission Ajax du formulaire. Alors, comment le validateur jQuery peut-il le faire. Le plug-in gère également les soumissions asynchrones ? Qu'en est-il de la validation des formulaires ? 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 le formulaire de soumission 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); 
} 
} 
}); 
});

Si vous souhaitez utiliser ajax pour soumettre le formulaire et que vous souhaitez également utiliser la validation de jquery pour la vérification, alors vous pouvez le résoudre comme ceci : form Le contenu du formulaire est toujours écrit normalement et le type est toujours le type de soumission, mais dans la méthode de validation, 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; 
     } 
});

Recommandations associées :

Méthode de vérification de BootStrap Validator

Remarques sur l'utilisation de BootStrap Validator (à lire absolument)

Parse le transfert de paramètres dynamiques et les attributs dynamiques de javascript.

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!