jQuery Validator vérifie la méthode de soumission de formulaire Ajax et la méthode de transmission des paramètres Ajax (tutoriel image et texte)

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 rédiger le formulaire de soumission jquery .ajax. Pour des exemples de codes spécifiques, veuillez vous référer à cet article.

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

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

Quand nous sommes Dans certaines entreprises légèrement complexes, vous pouvez rencontrer des situations dans lesquelles vous avez besoin de plusieurs formulaires sur la même page, mais vous ne souhaitez pas que la page s'actualise ou saute après la soumission d'un formulaire. Ensuite, ce que nous considérons est la soumission Ajax du formulaire, alors comment créer jQuery Le plug-in de validation 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 un formulaire de soumission jquery .ajax plus courant

$("#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, vous je veux aussi utiliser la validation de jquery peut être utilisée pour vérifier, donc cela peut ê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, 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; 
     } 
});

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Principes des requêtes inter-domaines Ajax (tutoriel graphique)

dwz Comment supprimer ajaxloading (tutoriel graphique)

Ajax coopère avec node js multer pour implémenter la fonction de téléchargement de fichiers

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!