Apakah itu jquery-form

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',          //把服务器返回的内容放入id为output的元素中    
   beforeSubmit: showRequest,  //提交前的回调函数
   success: showResponse,      //提交后的回调函数
   //url: url,                 //默认是form的action， 如果申明，则会覆盖
   //type: type,               //默认是form的method（get or post），如果申明，则会覆盖
   //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
   //clearForm: true,          //成功提交后，清除所有表单元素的值
   //resetForm: true,          //成功提交后，重置所有表单元素的值
   timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求
}
 
function showRequest(formData, jqForm, options){
   //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{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转换为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) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止
   //方式一：利用formData参数
   for (var i=0; i < formData.length; i++) {
       if (!formData[i].value) {
            alert(&#39;用户名,地址和自我介绍都不能为空!&#39;);
            return false;
        }
    } 
 
   //方式二：利用jqForm对象
   var form = jqForm[0]; //把表单转化为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); //组装数据
    //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!