jQuery 양식 플러그인 jquery.form.js

jQuery Form 플러그인은 매우 쉽고 비침습적으로 Ajax를 지원하도록 HTML 양식을 업그레이드할 수 있는 뛰어난 Ajax 양식 플러그인입니다. jQuery Form에는 양식 요소 제어부터 제출 프로세스 관리 방법 결정까지의 기능을 결합한 ajaxForm() 및 ajaxSubmit()이라는 두 가지 핵심 메서드가 있습니다. 또한 플러그인에는 formToArray(), formSerialize(), fieldSerialize(), fieldValue(),clearForm(),clearFields()및resetForm()등의 다른 메서드도 포함되어 있습니다.

다운로드 주소: http://malsup.com/jquery/form/#download

핵심 메서드 - ajaxForm() 및 ajaxSubmit()

$('#myForm').ajaxForm(function() {   
   $('#output1').html("提交成功！欢迎下次再来！").show();    
});  
       
$('#myForm2').submit(function() {
   $(this).ajaxSubmit(function() {   
      $('#output2').html("提交成功！欢迎下次再来！").show();    
   });
   return false; //阻止表单默认提交
});

Form 플러그의 두 가지 핵심 메서드를 통해- 에서는 양식의 HTML 코드 구조를 수정하지 않고도 양식 제출 방법을 Ajax 제출 방법으로 쉽게 업그레이드할 수 있습니다.

ajaxForm() 및 ajaxSubmit()은 모두 0 또는 1개의 매개변수를 허용합니다. 단일 매개변수인 경우 이 매개변수는 다음과 같습니다. 콜백 함수 또는 옵션 개체입니다. 옵션 개체는 양식을 더 효과적으로 제어할 수 있도록 아래에 소개되어 있습니다.

양식을 제출하기 전에 확인하세요. beforeSubmit이 양식 전에 호출됩니다. beforeSubmit이 false를 반환하면 양식 제출이 방지됩니다.

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;   //阻止表单默认提交
});

추천 튜토리얼: "

JS Tutorial

"

위 내용은 jQuery 양식 플러그인 jquery.form.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!