Analyse d'exemple d'utilisation du plug-in jQuery jQuery.Form.js (avec exemple de code source de démonstration)_jquery

L'exemple de cet article décrit l'utilisation de jQuery.Form.js du plug-in jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Le plug-in jQuery.Form.js est utilisé pour implémenter les formulaires de soumission Ajax.

Méthode :

1.formSerilize() est utilisé pour sérialiser les données du formulaire et les organiser automatiquement dans un format d'adresse URL adapté aux requêtes asynchrones AJAX.

2.clearForm() Efface le contenu de toutes les valeurs d'entrée dans le formulaire.

3.restForm Réinitialise tout le contenu des champs du formulaire. Autrement dit, restaurez tous les champs du formulaire à leurs valeurs par défaut lors du chargement de la page.

Question : La différence entre ajaxForm() et ajaxSubmit() :

Réponse : $("#form1").ajaxForm(); est équivalent aux deux lignes suivantes :

$("#form1".submit)(function(){
 $("#form1").ajaxSubmit();
return false;
})

C'est-à-dire que ajaxFrom() empêchera automatiquement la soumission du formulaire. AjaxSubmit() n'empêchera pas automatiquement la soumission du formulaire. Si vous souhaitez empêcher la soumission du formulaire, vous devez renvoyer false ;

Astuce 1 : Si vous souhaitez éviter de sauter une fois la soumission du formulaire terminée, une simple ligne de code peut y parvenir, ce qui revient presque à ne pas utiliser la soumission du formulaire :

$("#MailForm").ajaxSubmit(function(message) {
  alert("表单提交已成功!");
});

Remarque :AjaxForm() et ajaxForm() ne peuvent avoir aucun paramètre ou accepter 1 paramètre. Ce paramètre peut être soit une fonction de rappel, soit un objet d'options. Cet objet est très puissant et est décrit ainsi :

var options={
 url:url, //form提交数据的地址
 type:type, //form提交的方式(method:post/get)
 target:target, //服务器返回的响应数据显示在元素(Id)号确定
 beforeSubmit:function(), //提交前执行的回调函数
 success:function(), //提交成功后执行的回调函数
 dataType:null, //服务器返回数据类型
 clearForm:true, //提交成功后是否清空表单中的字段值
 restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
 timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
}

Exemple :

Code js de la page :

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $(":submit").click(function () {
    var options = {
      url: "indexAjax.aspx",
      target: "#div2",
      success: function () {
        alert("ajax请求成功");
      }
    };
    $("#form1").ajaxForm(options);
  })
})
</script>

Code HTML de la page :

<div id="div1">
<form id="form1" method="get" action="#">
  <p>我的名字：<input type="text" name="name" value="请输入内容" /></p>
  <p>我的偶像是：<input type="radio" name="Idol" value="刘德华" />刘德华  <input type="radio" name="Idol" value="张学友" />张学友</p>
  <p>我喜欢的音乐类型：<input type="checkbox" name="musictype" value="1.摇滚">摇滚 <input type="checkbox" name="musictype" value="2.轻松">轻柔 <input type="checkbox" name="musictype" value="3.爵士">爵士</p>
  <p><input type="submit" value="确认" /></p>
</form>
</div>
<div id="div2">
</div>

Backend : code indexAjax.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
  string strName = Request["name"];
  string strIdol = Request["Idol"];
  string strMusicType = Request["musictype"];
  Response.Clear();
  Response.Write("我的名字是：" + strName + ";  我的偶像是：" + strIdol + ";  我喜欢的音乐类型：" + strMusicType);
  Response.End();
}

Cliquez ici pour un exemple de code

Téléchargez depuis ce site.

Pour plus d'informations sur l'utilisation du plug-in jQuery, vous pouvez également vous référer aux sujets pertinents sur ce site  : "Résumé des plug-ins courants et de leur utilisation jQuery".

J'espère que cet article sera utile à tous ceux qui programment jQuery.