jQuery 폼 플러그 인 jquery. form. js 용법 상세 설명

jQuery. form. js 폼 플러그 인 은 HTML 폼 에서 AJAX 를 쉽게 사용 할 수 있 습 니 다.주요 방법 은 ajax Form 과 ajax Submit 가 폼 요소 에서 정 보 를 수집 하여 제출 과정 을 어떻게 관리 하 는 지 결정 합 니 다.더 많은 방법: formToArray, formSerialize, fieldSerialize, fieldValue, clearForm, clearFields, resetForm 예제 코드:

// wait for the DOM to be loaded
$(document).ready(function() {
$(‘#myForm’).ajaxForm(function() {
alert(“Thank you for your comment!”);
});
});

다운로드 주소:http://malsup.github.com/jquery.form.js 폼 플러그 인 API 영문 원문:http://www.malsup.com/jquery/form/#api 폼 플러그 인 API 는 폼 데 이 터 를 쉽게 관리 하고 폼 제출 을 할 수 있 는 몇 가지 방법 을 제공 합 니 다.ajax Form () 에 필요 한 모든 이벤트 모니터 를 추가 하여 AJAX 에 양식 을 제출 할 준 비 를 합 니 다.ajax Form 은 양식 을 제출 할 수 없습니다.document 의 ready 함수 에 서 는 ajaxform 을 사용 하여 AJAX 제출 폼 을 준비 합 니 다.ajax Form 은 0 개 또는 1 개의 인 자 를 받 습 니 다.이 하나의 매개 변 수 는 반전 함수 일 수도 있 고 Options 대상 일 수도 있 습 니 다.링크 가능 (Chainable): 네.실례:

    $(‘#myFormId’).ajaxForm();
    ajaxSubmit（）

당장 AJAX 에서 양식 제출 해.대부분의 경우 ajax Submit 를 호출 하여 사용자 가 제출 한 폼 에 응답 합 니 다.ajax Submit 는 0 개 또는 1 개의 인 자 를 받 습 니 다.이 하나의 매개 변 수 는 반전 함수 일 수도 있 고 Options 대상 일 수도 있 습 니 다.링크 가능 (Chainable): 네.실례:

    //            
    $(‘#myFormId’).submit(function() {
    $(this).ajaxSubmit();
    return false;
    });
    formSerialize（）

폼 을 직렬 화 (또는 직렬 화) 하여 검색 문자열 로 만 듭 니 다.이 방법 은 다음 형식의 문자열 을 되 돌려 줍 니 다: name 1 = value 1 & name 2 = value 2.링크 가능 (Chainable): 아니요, 이 방법 은 문자열 을 되 돌려 줍 니 다.실례:

    var queryString = $(‘#myFormId’).formSerialize();

    //       $.get、$.post、$.ajax      
    $.post(‘myscript.php’, queryString);

    fieldSerialize（）

폼 의 필드 요 소 를 직렬 화 (또는 직렬 화) 하여 검색 문자열 로 만 듭 니 다.일부 폼 필드 만 직렬 화 (또는 직렬 화) 가 필요 할 때 편리 합 니 다.이 방법 은 다음 형식의 문자열 을 되 돌려 줍 니 다: name 1 = value 1 & name 2 = value 2.링크 가능 (Chainable): 아니요, 이 방법 은 문자열 을 되 돌려 줍 니 다.실례:

    var queryString = $(‘#myFormId .specialFields’).fieldSerialize();
    fieldValue（）

배열 에 삽 입 된 폼 요소 값 을 되 돌려 줍 니 다.0.91 판 부터 이 방법 은 항상 배열 의 형식 으로 데 이 터 를 되 돌려 준다.요소 값 이 잘못 판정 되면 배열 이 비어 있 습 니 다. 그렇지 않 으 면 하나 이상 의 요소 값 을 포함 합 니 다.링크 가능 (Chainable): 아니요, 이 방법 은 배열 로 돌아 갑 니 다.실례:

    //        
    var value = $(‘#myFormId :password’).fieldValue();
    alert(‘The password is: ‘ + value[0]);
    resetForm（）

폼 요소 의 원래 DOM 방법 을 호출 하여 폼 을 초기 상태 로 복원 합 니 다.링크 가능 (Chainable): 네.실례:

    $(‘#myFormId’).resetForm();
    clearForm（）

폼 요 소 를 지 웁 니 다.이 방법 은 모든 텍스트 (text) 입력 필드, 비밀번호 (password) 입력 필드 와 텍스트 영역 (textarea) 필드 를 비 워 두 고 모든 select 요소 의 선택 을 지우 고 모든 체크 (radio) 단추 와 다 중 선택 (checkbox) 단 추 를 비 선택 상태 로 초기 화 합 니 다.링크 가능 (Chainable): 네.

    $(‘#myFormId’).clearForm();
    clearFields（）

필드 요소 지우 기.일부 폼 요 소 를 제거 해 야 사용 할 수 있 습 니 다.링크 가능 (Chainable): 네.

$(‘#myFormId .specialFields’).clearFields();

Options 대상 ajax Form 과 ajax Submit 은 많은 옵션 매개 변 수 를 지원 합 니 다. 이 옵션 매개 변 수 는 Options 대상 을 사용 하여 제공 할 수 있 습 니 다.Options 는 자바 스 크 립 트 대상 일 뿐 다음 과 같은 속성 과 값 의 집합 을 포함 합 니 다. target 은 페이지 에서 서버 응답 으로 업 데 이 트 된 요 소 를 가리 키 고 있 습 니 다.요소 의 값 은 jQuery 선택 기 문자열, jQuery 대상 또는 DOM 요소 로 지 정 될 수 있 습 니 다.기본 값: null.url 에서 폼 데 이 터 를 제출 할 URL 을 지정 합 니 다.기본 값: 폼 의 action 속성 값 type 은 폼 데 이 터 를 제출 하 는 방법 (method): "GET" 또는 "POST" 를 지정 합 니 다.기본 값: 폼 의 method 속성 값 (기본 값 인 "GET" 를 찾 지 못 하면).before Submit 폼 제출 전에 호출 된 리 셋 함수 입 니 다."beforeSubmit" 반전 함 수 는 갈고리 (hook) 로 서 사전 제출 논리 나 체크 폼 데 이 터 를 실행 할 수 있 습 니 다."beforeSubmit" 반전 함수 가 false 로 돌아 가면 폼 은 제출 되 지 않 습 니 다."beforeSubmit" 리 셋 함 수 는 세 개의 호출 매개 변 수 를 가지 고 있 습 니 다. 배열 형식의 폼 데이터, jQuery 폼 대상, 그리고 ajax Form / ajax Submit 에 들 어 오 는 Options 대상 입 니 다.폼 배열 은 다음 과 같은 방식 의 데 이 터 를 받 아들 입 니 다. [{name: username ', value: jresig'}, {name: 'password', value: 'secret'}] 기본 값: null success 폼 을 성공 적 으로 제출 한 후 호출 된 리 셋 함수 입 니 다."success" 리 셋 함 수 를 제공 하면 서버 에서 응답 을 되 돌려 받 으 면 호출 됩 니 다.그리고 dataType 옵션 값 으로 responseText 를 전송 할 지 responseXML 의 값 을 결정 합 니 다.기본 값: null dataType 이 되 돌아 오 기 를 원 하 는 데이터 형식 입 니 다.null, "xml", "script" 또는 "json" 중 하나 입 니 다.dataType 은 서버 의 응답 을 어떻게 처리 하 는 지 규정 하 는 방법 을 제공 합 니 다.이것 은 jQuery. httpData 방법 에 직접 반영 되 었 습 니 다.다음 값 이 지 원 됩 니 다: 'xml': dataType = = 'xml' 이 라면 서버 응답 을 XML 로 처리 합 니 다.또한 "success" 리 셋 방법 이 지정 되면 responseXML 값 으로 전 송 됩 니 다. "json ': dataType = =' json '이 있 으 면 서버 응답 이 값 을 구하 고' success' 리 셋 방법 으로 전 달 됩 니 다. 지정 되면 'script ': dataType = =' script '이 있 으 면 서버 응답 은 일반 텍스트 로 구 합 니 다.기본 값: null (서버 가 responseText 값 을 되 돌려 줍 니 다) semantic 불 로 고 는 데 이 터 를 엄격하게 의미 순서 (slower?) 에 따라 제출 해 야 하 는 지 여 부 를 표시 합 니 다.메모: 일반적으로 폼 은 type = "image" 의 input 요 소 를 제외 하고 의미 순서에 따라 직렬 화 되 었 습 니 다.서버 에 엄격 한 의미 요구 가 있 고 폼 에 type = "image" 의 input 요 소 를 포함 하고 있다 면 semantic 를 true 로 설정 해 야 합 니 다.기본 값: false resetForm 불 로 고 는 폼 제출 이 성공 하면 리 셋 할 지 여 부 를 표시 합 니 다.Default value: null clearForm 불 로 고 는 폼 이 제출 되면 폼 데 이 터 를 지 울 지 여 부 를 표시 합 니 다.기본 값: null 인 스 턴 스:

    //    Options  
    var options = {
    target:     ‘#divToUpdate’,
    url:        ‘comment.php’,
    success: function() {
    alert(‘Thanks for your comment!’);
    } };

    //  options  ajaxForm
    $(‘#myForm’).ajaxForm(options);

메모: Options 대상 은 jQuery 에 값 을 전달 하 는 $. ajax 방법 에 도 사용 할 수 있 습 니 다.$. ajax 가 지원 하 는 options 에 익숙 하 다 면 Options 대상 을 ajax Form 과 ajax Submit 에 전달 할 수 있 습 니 다.ajax Form () 은 폼 제출 방식 으로 ajax 기술 (폼 을 제공 해 야 하 는 action, id, method, 폼 에 submit 단 추 를 제공 하 는 것 이 좋 습 니 다) 을 처리 하 는 데 적 용 됩 니 다. ajax 기술 로 폼 을 제출 할 때의 데이터 전달 문 제 를 크게 간소화 하 였 습 니 다. ajax Form () 을 사용 하면 각각 자바 스 크 립 트 방식 으로 폼 속성 값 을 가 져 올 필요 가 없습니다.또한 요청 경로 뒤에 url 재 작성 방식 으로 데 이 터 를 전달 할 필요 도 없습니다.ajax Form () 은 현재 폼 의 각 속성의 값 을 자동 으로 수집 한 다음 폼 제출 방식 으로 대상 url 에 제출 합 니 다.이런 방식 으로 데 이 터 를 제출 하 는 것 은 비교적 안전 하고 사용 하기에 더욱 간단 하 며, 너무 많은 자 바스 크 립 트 코드 를 쓸 필요 가 없다

$(document).ready(function(){
registerForm’  id
data    
$(‘#registerForm’).ajaxForm(function(data){
alert(data);//  ajax        
});
});

ajax Submit () 는 이벤트 의 메커니즘 으로 ajax 로 form 폼 (하이퍼링크, 그림 의 click 이벤트) 을 제출 하 는 데 적 용 됩 니 다. 이 방법 은 ajax Form () 과 유사 하지만 더욱 유연 합 니 다. 이벤트 체제 에 의존 하기 때문에 이벤트 가 존재 하면 이 방법 을 사용 할 수 있 습 니 다.이 form 의 action 속성 만 지정 하면 됩 니 다. submit 단 추 를 제공 할 필요 가 없습니다.

$(document).ready(function(){
$(‘#btn’).click(function(){
$(‘#registerForm’).ajaxSubmit(function(data){
alert(data);
});
return false;
});
});

이 세그먼트 코드 는 폼 에 id 가 btn 인 단추 click 이벤트 가 실 행 될 때 ajax Submit () 방법 으로 ajax 기술 로 폼 을 제출 하 는 action 이 가리 키 는 경로 formSerialize () 는 하나의 form 에 있 는 모든 폼 요 소 를 name 으로 key, value 를 값 으로 정렬 하 는 작업 입 니 다.이 는 모든 폼 요소 에 폼 요소 name 속성 을 설정 하고 폼 요소 value 의 값 을 채 워 야 합 니 다. id 를 설정 하여 jquery 포 지 셔 닝 폼 요 소 를 편리 하 게 설정 하 는 것 이 좋 습 니 다.이 방법 을 사용 하려 면 폼 요소 name 속성 을 설정 하고 폼 요소 value 의 값 을 채 워 야 합 니 다. 저 는 처음 사용 할 때 name 속성 을 설정 하 는 것 을 잊 었 습 니 다. 마지막 으로 동료 들 의 도움 을 받 아 이 오 류 를 오래 찾 았 습 니 다.

var str=$(‘#registerForm’).formSerialize(); // registerForm form id
alert(str);

fieldSerialize () 는 form 에 있 는 폼 요 소 를 정렬 하여 name 을 key 로 하고 value 를 값 으로 정렬 하 는 작업 입 니 다. 모든 폼 요소 에 폼 요소 name 속성 을 설정 하고 폼 요소 value 를 채 워 야 합 니 다.

var str=$(‘#username). fieldSerialize();
alert(str);

원본 주소:http://www.onexin.net/jquery-the-form-plugin-jquery-form-js-usage-detailed/     나 눔 은 더 많은 사람들 에 게 이익 을 준다!