jquery-form merujuk kepada pustaka borang jQuery, yang merupakan pemalam penyerahan tak segerak yang boleh dengan mudah dan tidak invasif menaik taraf borang HTML untuk menyokong Ajax pemalam mempunyai dua kaedah teras: ajaxForm(; ) dan ajaxSubmit( ), yang menyatukan fungsi daripada mengawal elemen borang kepada memutuskan cara menguruskan proses penyerahan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.3.1, komputer Dell G3.

Apakah itu jquery-form

jquery-form merujuk kepada jQuery form library, yang merupakan jQuery-based form asynchronous submission plug- dalam untuk Memproses penyerahan AJAX menjadikan penyerahan borang AJAX mudah dan mudah, dan boleh mengawal sepenuhnya proses penyerahan dan hasil pemprosesan Ia tidak memerlukan sebarang bantuan tag khas dan tidak menjejaskan struktur borang asal. borang biasa boleh ditingkatkan dengan lancar kepada borang penyerahan ajax.

Kelebihan pemalam

• Dengan hanya beberapa baris kod, kami boleh menyerahkan borang dan menggunakan ajaxSubmit() secara fleksibel fungsi berdasarkan Pencetusan sebarang peristiwa membolehkan penyerahan borang tidak segerak.

• Menyokong fungsi muat naik fail dan menyokong kemas kini bar kemajuan dalam penyemak imbas baharu.

• disepadukan dengan sempurna dengan perpustakaan jQuery, menyokong pelbagai peristiwa yang dicetuskan oleh fungsi jQuery.ajax() dan menyokong parameter yang diluluskan dalam jQuery.ajax().

borang jquery menjadikannya sangat mudah dan tidak mengganggu untuk menaik taraf borang HTML untuk menyokong Ajax. Borang jQuery mempunyai dua kaedah teras - ajaxForm() dan ajaxSubmit(), yang menggabungkan fungsi daripada mengawal elemen borang kepada memutuskan cara mengurus proses penyerahan. Selain itu, pemalam juga termasuk kaedah lain: formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() dan resetForm(), dsb.

Alamat muat turun: http://malsup.com/jquery/form/#download

Kaedah teras - ajaxForm() dan ajaxSubmit()

$('#myForm').ajaxForm(function() {   
   $('#output1').html("提交成功！歡迎下次再來(lái)！").show();    
});  
       
$('#myForm2').submit(function() {
   $(this).ajaxSubmit(function() {   
      $('#output2').html("提交成功！歡迎下次再來(lái)！").show();    
   });
   return false; //阻止表單默認(rèn)提交
});

Melalui dua kaedah teras pemalam Borang, anda boleh menaik taraf kaedah penyerahan borang dengan mudah kepada kaedah penyerahan Ajax tanpa mengubah suai struktur kod HTML borang

ajaxForm() dan ajaxSubmit( ) boleh menerima 0 atau 1 parameter Apabila ia adalah satu parameter, parameter boleh sama ada fungsi panggil balik atau objek pilihan Contoh di atas ialah fungsi panggil balik Objek pilihan diperkenalkan di bawah untuk menjadikannya sesuai lebih kawalan

var options = {
   target: '#output',          //把服務(wù)器返回的內(nèi)容放入id為output的元素中    
   beforeSubmit: showRequest,  //提交前的回調(diào)函數(shù)
   success: showResponse,      //提交后的回調(diào)函數(shù)
   //url: url,                 //默認(rèn)是form的action， 如果申明，則會(huì)覆蓋
   //type: type,               //默認(rèn)是form的method（get or post），如果申明，則會(huì)覆蓋
   //dataType: null,           //html(默認(rèn)), xml, script, json...接受服務(wù)端返回的類(lèi)型
   //clearForm: true,          //成功提交后，清除所有表單元素的值
   //resetForm: true,          //成功提交后，重置所有表單元素的值
   timeout: 3000               //限制請(qǐng)求的時(shí)間，當(dāng)請(qǐng)求大于3秒后，跳出請(qǐng)求
}
 
function showRequest(formData, jqForm, options){
   //formData: 數(shù)組對(duì)象，提交表單時(shí)，F(xiàn)orm插件會(huì)以Ajax方式自動(dòng)提交這些數(shù)據(jù)，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
   //jqForm:   jQuery對(duì)象，封裝了表單的元素   
   //options:  options對(duì)象
   var queryString = $.param(formData);   //name=1&address=2
   var formElement = jqForm[0];              //將jqForm轉(zhuǎn)換為DOM對(duì)象
   var address = formElement.address.value;  //訪問(wèn)jqForm的DOM元素
   return true;  //只要不返回false，表單都會(huì)提交,在這里可以對(duì)表單元素進(jìn)行驗(yàn)證
};
 
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;   //阻止表單默認(rèn)提交
});

Sahkan sebelum borang diserahkan: sebelumSerah akan dipanggil sebelum borang diserahkan Jika sebelumSerah kembali palsu, penyerahan borang akan dihalang

beforeSubmit: validate
function validate(formData, jqForm, options) { //在這里對(duì)表單進(jìn)行驗(yàn)證，如果不符合規(guī)則，將返回false來(lái)阻止表單提交，直到符合規(guī)則為止
   //方式一：利用formData參數(shù)
   for (var i=0; i < formData.length; i++) {
       if (!formData[i].value) {
            alert(&#39;用戶名,地址和自我介紹都不能為空!&#39;);
            return false;
        }
    } 
 
   //方式二：利用jqForm對(duì)象
   var form = jqForm[0]; //把表單轉(zhuǎn)化為dom對(duì)象
      if (!form.name.value || !form.address.value) {
            alert(&#39;用戶名和地址不能為空，自我介紹可以為空！&#39;);
            return false;
      }
 
   //方式三：利用fieldValue()方法，fieldValue 是表單插件的一個(gè)方法，它能找出表單中的元素的值，返回一個(gè)集合。
   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); //組裝數(shù)據(jù)
    //alert(queryString); //類(lèi)似 ： name=1&add=2  
    return true;
}

[Disyorkan. pembelajaran: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Apakah itu jquery-form. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!