jQuery Form 플러그인 사용법에 대한 자세한 설명

이 글은 주로 jQuery Form 플러그인의 사용법을 자세히 소개하고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

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개 받아들일 수 있습니다. 둘 다 콜백 함수일 수도 있고 옵션 개체일 수도 있습니다. 위의 예는 콜백 함수입니다. 옵션 개체는 양식을 더 잘 제어할 수 있도록 아래에 소개되어 있습니다.

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

양식을 제출하기 전에 확인하세요. : beforeSubmit이 false를 반환하면 양식이 제출되지 않습니다.

jQuery 양식 플러그인_jquery의 ajaxForm() 및 ajaxSubmit()의 선택적 매개변수 객체

server_jquery에서 반환된 JSON, XML, HTML 데이터를 처리하기 위한 jQuery 양식 플러그인 사용

위 내용은 jQuery Form 플러그인 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!