> 웹 프론트엔드 > JS 튜토리얼 > jQuery Form 플러그인 사용법에 대한 자세한 설명

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

小云云
풀어 주다: 2018-01-01 10:30:38
원래의
1656명이 탐색했습니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿