query 플러그 인의 ajax Form ajax Submit 이해 용법

현재 ajax 가 하늘 을 날 고 있 으 며,중점 적 인 form 으로 도 자 연 스 럽 게 보살핌 을 받 고 있 습 니 다.
사실,우 리 는 평소에 Jquery 비동기 제출 폼 을 사용 합 니 다.보통 submit()에서$.ajax 를 사용 합 니 다.예 를 들 면:
 

    $(function(){

        $('#myForm').submit(function(){

            $.ajax({

                url:"/WebTest/test/testJson.do",

                data:$('#myForm').serialize(),

                dataType:"json",

                error:function(data){

                    alert(data);

                },

                success:function(data){

                    alert(data);

                }

            });

        });        

    }) 

 
이러한 방식 은 form 의 기능 을 덮어 변 형 된 ajax 로 만 들 었 다.form 사상 에 맞 는 ajax Form 을 살 펴 보 겠 습 니 다.
 
ajaxForm:
먼저 다운로드:http://files.cnblogs.com/china-li/jquery.form.js
두 개의 주요 API:ajax Form()ajax Submit().
ajax Form()설정 이 완료 되면 바로 제출 하 는 것 이 아니 라 submit()이 벤트 를 기 다 려 야 합 니 다.준비 일 뿐 입 니 다.일반 용법:
 

$(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000  }; // bind form using 'ajaxForm' $('#myForm1').ajaxForm(options).submit(function(){return false;}); });

 
이것 은 정부의 예 이지 만,그 는 마지막 제출 이 없다.제출 중 false 를 되 돌려 기본 제출 동작 을 막 고 ajax 로 대화 합 니 다.
그 중에서 options 의 속성,중요 한 설명:
 

target                  target 

url                ，    form action

type          get post    

dataType             ，  ：json、xml、script

clearForm     true，                

resetForm     true，             

iframe            ，     iframe      

beforeSerialize          ：function($form,options){}

beforeSubmit     ：function(arr,$from,options){}

success            ：function(data,statusText){}

error           ：function(data){alert(data.message);}   

 
 ajax Submit 예제:
 

$(document).ready(function() { 

    var options = { 

        target:        '#output2',   // target element(s) to be updated with server response 

        beforeSubmit:  showRequest,  // pre-submit callback 

        success:       showResponse  // post-submit callback 

 

        // other available options: 

        //url:       url         // override for form's 'action' attribute 

        //type:      type        // 'get' or 'post', override for form's 'method' attribute 

        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 

        //clearForm: true        // clear all form fields after successful submit 

        //resetForm: true        // reset the form after successful submit 

 

        // $.ajax options can be used here too, for example: 

        //timeout:   3000 

    }; 

 

    // bind to the form's submit event 

    $('#myForm2').submit(function() { 

        // inside event callbacks 'this' is the DOM element so we first 

        // wrap it in a jQuery object and then invoke ajaxSubmit 

        $(this).ajaxSubmit(options); 

 

        // !!! Important !!! 

        // always return false to prevent standard browser submit and page navigation 

        return false; 

    }); 

}); 

 
그 중에서 매개 변수 설정 은 대동소이 하 다.다만 ajax Submit()는 언제든지 제출 할 수 있 습 니 다!
 
다른 API: 
 

$('#myFormId').clearForm();

$('#myFormId .specialFields').clearFields();

$('#myFormId').resetForm();

var value = $('#myFormId :password').fieldValue();

var queryString = $('#myFormId .specialFields').fieldSerialize();