Analyse der Verwendung des jQuery-Plug-ins jQuery.Form.js (mit Demo-Beispielquellcode)_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery.Form.js des jQuery-Plug-ins. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Das Plug-in jQuery.Form.js wird zur Implementierung von Ajax-Übermittlungsformularen verwendet.

Methode:

1.formSerilize() wird verwendet, um die Daten im Formular zu serialisieren und sie automatisch in einem URL-Adressformat zu organisieren, das für asynchrone AJAX-Anfragen geeignet ist.

2.clearForm() Löscht den Inhalt aller Eingabewerte im Formular.

3.restForm Alle Feldinhalte im Formular zurücksetzen. Das heißt, alle Felder im Formular werden beim Laden der Seite auf ihre Standardwerte zurückgesetzt.

Frage: Der Unterschied zwischen ajaxForm() und ajaxSubmit():

Antwort: $("#form1").ajaxForm(); entspricht den folgenden zwei Zeilen:

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

Das heißt, ajaxFrom() verhindert automatisch die Formularübermittlung. AjaxSubmit() verhindert nicht automatisch die Formularübermittlung. Wenn Sie die Formularübermittlung verhindern möchten, müssen Sie

zurückgeben

Tipp 1: Wenn Sie vermeiden möchten, nach Abschluss der Formularübermittlung zu springen, können Sie dies mit einer einfachen Codezeile erreichen, was fast dasselbe ist, als würden Sie die Formularübermittlung nicht verwenden:

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

Hinweis:Sowohl ajaxForm() als auch ajaxForm() können keine Parameter haben oder 1 Parameter akzeptieren. Dieser Parameter kann entweder eine Rückruffunktion oder ein Optionsobjekt sein. Dieses Objekt ist sehr mächtig und wird wie folgt beschrieben:

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 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
}

Beispiel:

Js-Code der Seite:

<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>

HTML-Code der Seite:

<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: indexAjax.aspx.cs-Code

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

Klicken Sie hier für BeispielcodeDownload von dieser Website.

Weitere Informationen zur Verwendung von jQuery-Plug-ins finden Sie auch in den entsprechenden Themen auf dieser Website : „Zusammenfassung der allgemeinen jQuery-Plug-ins und deren Verwendung“.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.