[jQuery] ajaxSubmit – 심플한 ajax 통신

이번 포스팅은 jQuery의 ajaxSubmit 함수닷 !

이전에는 ajax 통신에 ajax 함수나 post 함수를 써서 데이터 주고받고 했었는데,

입력 폼이 있고 그 폼값으로 submit 할때에는 이 ajaxSubmit 함수가 더 유용하다.

이 함수를 사용하면 submit 이전에 처리할 작업과 submit 후의 작업을 따로 정리할 수 있어서 소스 가독성도 높일 수 있다 ! 

// ajaxSubmit 사용하기

// ajaxSubmit Form
<form id="frmApply" method="post" action="./testAjax.html" onSubmit="return false;">
 <input type="hidden" name="f_data1" value="">
 <input type="hidden" name="f_data2" value="">
 <input type="hidden" name="f_data3" value="">
 <input type="hidden" name="f_data4" value="">
</form>

// ajaxSubmit Call Button
<a href="#" id="ajaxSubmitBtn" >ajaxSubmit Call</a>

// javascript ajaxForm controll
<script type="text/javascript">

var options = {
 beforeSubmit : "",
 success : "",
 dataType : 'json'
};

$(function(){

 $("#ajaxSubmitBtn").click(function(e){
 e.preventDefault();
 apply();
 });

});

function apply()
{
 // ajaxSubmit Option
 options = {
 beforeSubmit : applyBefore, // ajaxSubmit 전처리 함수
 success : applyAfter, // ajaxSubmit 후처리 함수
 dataType : 'json' // 데이터 타입 json
 };
 // frmApply Form Data값을 testAjax.html 으로 ajax 전송
 $("#frmApply").ajaxSubmit(options);
}

function applyBefore(formData, jqForm, options)
{

 // ajaxSubmit 전 처리 작업 영역

 return true;
}

function applyAfter(objResponse, statusText, xhr, $form)
{
 if (statusText == "success") {
 // ajax 통신 성공 후 처리영역
 if (objResponse.strResult == "SUCCESS" ) {
 // 리턴받은 json 배열의 strResult 값이 "SUCCESS"일 경우 처리영역
 } else {
 // SUCCESS 이외의 값으로 리턴됐을 경우 처리영역
 }
 } else {
 // ajax 통신 실패 처리영역
 }
}

</script> remote = origin merge = refs/heads/br1