pemalam jQuery analisis contoh penggunaan jQuery.Form.js (dengan kod sumber contoh demo)_jquery

Contoh dalam artikel ini menerangkan penggunaan jQuery.Form.js pemalam jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Pemalam jQuery.Form.js digunakan untuk melaksanakan borang penyerahan Ajax.

Kaedah:

1.formSerilize() digunakan untuk menyerikan data dalam borang dan menyusunnya secara automatik ke dalam format alamat URL yang sesuai untuk permintaan tak segerak AJAX.

2.clearForm() Membersihkan kandungan semua nilai input dalam borang.

3.restForm Tetapkan semula semua kandungan medan dalam borang. Iaitu, pulihkan semua medan dalam bentuk kepada nilai lalainya apabila halaman dimuatkan.

Soalan: Perbezaan antara ajaxForm() dan ajaxSubmit():

Jawapan: $("#form1").ajaxForm(); adalah bersamaan dengan dua baris berikut:

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

Maksudnya, ajaxFrom() akan menghalang penyerahan borang secara automatik. AjaxSubmit() tidak akan menghalang penyerahan borang secara automatik. Jika anda ingin menghalang penyerahan borang, anda mesti mengembalikan palsu;

Petua 1: Jika anda ingin mengelak daripada melompat selepas penyerahan borang selesai, maka barisan kod mudah boleh mencapainya, yang hampir sama dengan tidak menggunakan penyerahan borang:

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

Nota:Kedua-dua ajaxForm() dan ajaxForm() tidak boleh mempunyai parameter atau menerima 1 parameter. Parameter ini boleh sama ada fungsi panggil balik atau objek pilihan. Objek ini sangat berkuasa dan diterangkan seperti berikut:

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

Contoh:

Kod js halaman:

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

Kod HTML halaman:

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

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

Klik di sini untuk contoh kod

Muat turun dari tapak ini.

Untuk lebih banyak penggunaan pemalam jQuery, anda juga boleh merujuk topik yang berkaitan di tapak ini : "Ringkasan pemalam dan penggunaan biasa jQuery".

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.