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("提交成功！歡迎下次再來！").show();    
});  
       
$('#myForm2').submit(function() {
   $(this).ajaxSubmit(function() {   
      $('#output2').html("提交成功！歡迎下次再來！").show();    
   });
   return false; //阻止表單默認提交
});

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,                 //默認是form的action， 如果申明，則會覆蓋
   //type: type,               //默認是form的method（get or post），如果申明，則會覆蓋
   //dataType: null,           //html(默認), xml, script, json...接受服務(wù)端返回的類型
   //clearForm: true,          //成功提交后，清除所有表單元素的值
   //resetForm: true,          //成功提交后，重置所有表單元素的值
   timeout: 3000               //限制請求的時間，當請求大于3秒后，跳出請求
}
 
function showRequest(formData, jqForm, options){
   //formData: 數(shù)組對象，提交表單時，F(xiàn)orm插件會以Ajax方式自動提交這些數(shù)據(jù)，格式如：[{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轉(zhuǎn)換為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;   //阻止表單默認提交
});

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) { //在這里對表單進行驗證，如果不符合規(guī)則，將返回false來阻止表單提交，直到符合規(guī)則為止
   //方式一：利用formData參數(shù)
   for (var i=0; i < formData.length; i++) {
       if (!formData[i].value) {
            alert(&#39;用戶名,地址和自我介紹都不能為空!&#39;);
            return false;
        }
    } 
 
   //方式二：利用jqForm對象
   var form = jqForm[0]; //把表單轉(zhuǎn)化為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); //組裝數(shù)據(jù)
    //alert(queryString); //類似 ： 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!