Ketahui cara menggunakan borang pemalam jQuery plug-in_jquery dengan cepat

Pemalam Borang jQuery ialah pemalam borang Ajax yang sangat baik yang boleh meningkatkan borang HTML dengan mudah dan tidak invasif 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.
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 struktur kod HTML borang tersebut. Kedua-dua 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 dan yang berikut <.>Memperkenalkan objek pilihan, memberi mereka lebih kawalan ke atas borang:

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 penyerahan borang: beforeSubmit akan dipanggil sebelum serahan borang Jika beforeSubmit mengembalikan 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('用户名,地址和自我介绍都不能为空!'); 
   return false; 
  } 
 } 
 
 //方式二：利用jqForm对象 
 var form = jqForm[0]; //把表单转化为dom对象 
  if (!form.name.value || !form.address.value) { 
   alert('用户名和地址不能为空，自我介绍可以为空！'); 
   return false; 
  } 
 
 //方式三：利用fieldValue()方法，fieldValue 是表单插件的一个方法，它能找出表单中的元素的值，返回一个集合。 
 var usernameValue = $('input[name=name]').fieldValue(); 
 var addressValue = $('input[name=address]').fieldValue(); 
 if (!usernameValue[0] || !addressValue[0]) { 
  alert('用户名和地址不能为空，自我介绍可以为空！'); 
  return false; 
 } 
 
 var queryString = $.param(formData); //组装数据 
 //alert(queryString); //类似 ： name=1&add=2 
 return true; 
} 

Artikel ini memperkenalkan secara terperinci cara menggunakan pemalam borang Borang Saya harap semua orang akan mempelajarinya dengan teliti dan memperoleh sesuatu daripadanya.