jQuery - ajaxSubmit 사용법 및 유의사항(페이지 리로드 현상)

jQuery 플러그인 중 form태그 내부의 데이터를 편하게 비동기 처리해주는 기능이 있습니다.

바로 jQuery의 ajaxSubmit(); 인데요.

submit이지만 비동기로 처리할 수 있고 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있는 장점이 있습니다.

사용법은 아래와 같습니다.

 

사용방식

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 
    }; 

$(formTag).ajaxSubmit(options);

formTag에 ajaxForm() 메소드를 연결하여 사용합니다.

저런 옵션들이 있구나 정도로 보시면 될 것 같고, 좀 더 자세한 사용법을 보겠습니다.

 

 

ajax동작 처리에 따른 결과값 받는 예제(주의점)

 

form.html

<form id="myForm" action="insertBoard.do" method="post"> 
    title: <input type="text" name="title" /> 
    Content: <textarea name="Content"></textarea> 
    <input type="submit" value="Save" /> 
</form>

form.js

<script>
var option = {
    dataType : 'json', //JSON형태로 전달도 가능합니다.
    url: "insertBoard.do",
    success: function(res){
        alert(res.msg); //res Object안에 msg에는 결과 메시지가 담겨있습니다.
    },
    error: function(res){
        alert("에러가 발생했습니다.")
    }
}

$('#myForm').submit(function() { //submit이 발생하면
    $(this).ajaxSubmit(option); //옵션값대로 ajax비동기 동작을 시키고
    return false; //기본 동작인 submit의 동작을 막아 페이지 reload를 막는다.
});
</script> 

 

여기서 주의하실점은 submit기능 동작 정의 후 마지막에 있는 return false;입니다.

이부분을 처리하지 않으면 아무리 success, error옵션을 처리하여도 페이지가 submit이 먹히기 때문에 페이지 리로드 현상이 발생하고 결과값에 따른 동작(alert() 메시지 출력)을 정상적으로 처리 할 수 없습니다.

 

위 예제에서 사용한 option에서 사용한 기능 외에 다른 기능은  공식 API 문서를 통해 더 많은 정보를 볼 수 있습니다.

아래에 공식 API 정보가 있는 URL을 링크해두었으니 참고하시면 더 좋을 것 같습니다.

http://jquery.malsup.com/form/#getting-started