Qu'est-ce que le formulaire jquery

jquery-form fait référence à la bibliothèque de formulaires jQuery, qui est un plug-in de soumission asynchrone de formulaire qui peut mettre à niveau facilement et de manière non invasive les formulaires HTML pour prendre en charge Ajax ; le plug-in a deux méthodes principales : ajaxForm() et ajaxSubmit( ), qui sont intégrés Du contrôle des éléments du formulaire à la possibilité de décider comment gérer le processus de soumission.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.3.1, ordinateur Dell G3.

Qu'est-ce que jquery-form

jquery-form fait référence à la bibliothèque de formulaires jQuery, qui est un plug-in de soumission asynchrone de formulaire basé sur jQuery pour traiter la soumission de formulaire AJAX, rendant la soumission de formulaire AJAX simple, facile et complet Le contrôle du processus de soumission et du traitement des résultats ne nécessite aucune aide particulière en matière de balises et n'affecte pas la structure du formulaire d'origine. Tant que la bibliothèque est utilisée, le formulaire ordinaire peut être mis à niveau en douceur vers un formulaire de soumission ajax.

Avantages du plug-in

• Avec seulement quelques lignes de code, nous pouvons implémenter la soumission de formulaire et implémenter de manière flexible la soumission de formulaire asynchrone basée sur le déclenchement de n'importe quel événement via la fonction ajaxSubmit().

• Prend en charge la fonction de téléchargement de fichiers et prend en charge la mise à jour de la barre de progression dans les nouveaux navigateurs.

• est parfaitement intégré à la bibliothèque jQuery, prend en charge divers événements déclenchés par la fonction jQuery.ajax() et prend en charge les paramètres passés dans jQuery.ajax().

jquery-form rend très simple et non intrusive la mise à niveau des formulaires HTML pour prendre en charge Ajax. jQuery Form a deux méthodes principales - ajaxForm() et ajaxSubmit(), qui combinent des fonctionnalités allant du contrôle des éléments du formulaire à la décision sur la manière de gérer le processus de soumission. De plus, le plug-in inclut également d'autres méthodes : formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() et resetForm(), etc.

Adresse de téléchargement : http://malsup.com/jquery/form/#download

Méthodes principales - ajaxForm() et ajaxSubmit()

$('#myForm').ajaxForm(function() {   
   $('#output1').html("提交成功！欢迎下次再来！").show();    
});  
       
$('#myForm2').submit(function() {
   $(this).ajaxSubmit(function() {   
      $('#output2').html("提交成功！欢迎下次再来！").show();    
   });
   return false; //阻止表单默认提交
});

Grâce aux deux méthodes principales du plug-in Form, vous pouvez Lors de la modification de la structure du code HTML du formulaire, vous pouvez facilement mettre à niveau la méthode de soumission du formulaire vers la méthode de soumission Ajax

ajaxForm() et ajaxSubmit() acceptent toutes deux 0 ou 1 paramètre. Lorsqu'il s'agit d'un seul paramètre, le paramètre est les deux. Il peut s'agir d'une fonction de rappel ou d'un objet d'options. L'exemple ci-dessus est une fonction de rappel. L'objet d'options est présenté ci-dessous, afin qu'ils aient plus de contrôle sur le formulaire

var options = {
   target: '#output',          //把服务器返回的内容放入id为output的元素中    
   beforeSubmit: showRequest,  //提交前的回调函数
   success: showResponse,      //提交后的回调函数
   //url: url,                 //默认是form的action， 如果申明，则会覆盖
   //type: type,               //默认是form的method（get or post），如果申明，则会覆盖
   //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
   //clearForm: true,          //成功提交后，清除所有表单元素的值
   //resetForm: true,          //成功提交后，重置所有表单元素的值
   timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求
}
 
function showRequest(formData, jqForm, options){
   //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
   //jqForm:   jQuery对象，封装了表单的元素   
   //options:  options对象
   var queryString = $.param(formData);   //name=1&address=2
   var formElement = jqForm[0];              //将jqForm转换为DOM对象
   var address = formElement.address.value;  //访问jqForm的DOM元素
   return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
};
 
function showResponse(responseText, statusText){
   //dataType=xml
   var name = $('name', responseXML).text();
   var address = $('address', responseXML).text();
   $("#xmlout").html(name + "  " + address);
   //dataType=json
   $("#jsonout").html(data.name + "  " + data.address);
};
 
$("#myForm").ajaxForm(options);
 
$("#myForm2").submit(funtion(){
   $(this).ajaxSubmit(options);
   return false;   //阻止表单默认提交
});

Vérifiez avant que le formulaire ne soit soumis : beforeSubmit vérifiera avant le formulaire. le formulaire est soumis. est appelé, si beforeSubmit renvoie faux, la soumission du formulaire sera empêchée

beforeSubmit: validate
function validate(formData, jqForm, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止
   //方式一：利用formData参数
   for (var i=0; i < formData.length; i++) {
       if (!formData[i].value) {
            alert(&#39;用户名,地址和自我介绍都不能为空!&#39;);
            return false;
        }
    } 
 
   //方式二：利用jqForm对象
   var form = jqForm[0]; //把表单转化为dom对象
      if (!form.name.value || !form.address.value) {
            alert(&#39;用户名和地址不能为空，自我介绍可以为空！&#39;);
            return false;
      }
 
   //方式三：利用fieldValue()方法，fieldValue 是表单插件的一个方法，它能找出表单中的元素的值，返回一个集合。
   var usernameValue = $(&#39;input[name=name]&#39;).fieldValue();
   var addressValue = $(&#39;input[name=address]&#39;).fieldValue();
   if (!usernameValue[0] || !addressValue[0]) {
      alert(&#39;用户名和地址不能为空，自我介绍可以为空！&#39;);
      return false;
   }
 
    var queryString = $.param(formData); //组装数据
    //alert(queryString); //类似 ： name=1&add=2  
    return true;
}

[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo frontale Web]

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!