jquery-form이란 무엇입니까?

jquery-form은 Ajax를 지원하기 위해 HTML 양식을 쉽고 비침해적으로 업그레이드할 수 있는 양식 비동기 제출 플러그인인 jQuery 양식 라이브러리를 나타냅니다. 플러그인에는 ajaxForm() 및 ajaxSubmit( ), 양식 요소 제어부터 제출 프로세스 관리 방법 결정 기능까지 통합되어 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.3.1 버전, Dell G3 컴퓨터.

jquery-form이란 무엇입니까

jquery-form은 jQuery 기반 양식 AJAX 제출을 처리하기 위한 jQuery 기반 양식 비동기 제출 플러그인인 jQuery 양식 라이브러리를 말하며, 양식 AJAX 제출을 간단하고 쉽고 효율적으로 만들어줍니다. 완료 제출 프로세스 및 처리 결과를 제어하는 ​​데 특별한 태그 지원이 필요하지 않으며 원본 양식 구조에 영향을 주지 않습니다. 이 라이브러리를 사용하는 한 일반 양식을 Ajax 제출 양식으로 원활하게 업그레이드할 수 있습니다.

플러그인의 장점

• 단 몇 줄의 코드만으로 양식 제출을 구현할 수 있으며 ajaxSubmit() 함수를 통해 이벤트 트리거를 기반으로 비동기식 양식 제출을 유연하게 구현할 수 있습니다.

• 파일 업로드 기능을 지원하고 새 브라우저에서 진행률 표시줄 업데이트를 지원합니다.

• 은 jQuery 라이브러리와 완벽하게 통합되어 있으며 jQuery.ajax() 함수에 의해 트리거되는 다양한 이벤트를 지원하고 jQuery.ajax()에 전달된 매개 변수를 지원합니다.

jquery-form을 사용하면 Ajax를 지원하도록 HTML 양식을 업그레이드하는 것이 매우 쉽고 방해가 되지 않습니다. 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 매개변수를 허용하며, 매개변수는 둘 다입니다. 콜백 함수일 수도 있고 옵션 객체일 수도 있습니다. 위의 예는 콜백 함수입니다. 옵션 객체는 양식을 제출하기 전에 확인합니다. submit이 호출되고 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;   //阻止表单默认提交
});

[권장 학습:

jQuery 비디오 튜토리얼

, 웹 프론트 엔드 비디오]

위 내용은 jquery-form이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!