[jQuery] ajaxSubmit - 심플한 ajax 통신

[jQuery] ajaxSubmit - 심플한 ajax 통신

 

 

프로그래밍 포스팅이 참 ~ 오랜만이다 

 

요즘은 한창 jqGrid에 빠져서 포스팅할때랑은 다르게 새로운 뭔가를 발견하질 못했다 -ㅁ- 

jqGrid를 열심히 포스팅했던건 jqGrid 관련 포스팅이 별로 없는거 같아서 였던게 컸는데 ㅠ

 

 

그래도, 유용한 소스를 보면 포스팅하고 싶어지는게 또 개발자 블로거의 마음 ㅎ 

 

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

 

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

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

 

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

 

그럼 , 간단 심플 예제 투척 !! 

 

1. // ajaxSubmit 사용하기
2.  
3. // ajaxSubmit Form
4. <form id="frmApply" method="post" action="./testAjax.html" onSubmit="return false;">
5.     <input type="hidden" name="f_data1" value="">
6.     <input type="hidden" name="f_data2" value="">
7.     <input type="hidden" name="f_data3" value="">
8.     <input type="hidden" name="f_data4" value="">
9. </form>
10.  
11. // ajaxSubmit Call Button
12. <a href="#" id="ajaxSubmitBtn" >ajaxSubmit Call</a>
13.  
14. // javascript ajaxForm controll
15. <script type="text/javascript">
16.  
17. var options = {
18.     beforeSubmit : "",
19.     success      : "",
20.     dataType     : 'json'
21. };    
22.  
23. $(function(){
24.    
25.    $("#ajaxSubmitBtn").click(function(e){
26.         e.preventDefault();
27.         apply();
28.     });
29.    
30. });
31.  
32. function apply()
33. {
34.     // ajaxSubmit Option  
35.     options = {
36.         beforeSubmit : applyBefore, // ajaxSubmit 전처리 함수
37.         success      : applyAfter,  // ajaxSubmit 후처리 함수
38.         dataType     : 'json'       // 데이터 타입 json
39.     };
40.     // frmApply Form Data값을 testAjax.html 으로 ajax 전송
41.     $("#frmApply").ajaxSubmit(options);
42. }
43.  
44. function applyBefore(formData, jqForm, options)
45. {        
46.    
47.     // ajaxSubmit 전 처리 작업 영역
48.  
49.     return true;
50. }
51.  
52. function applyAfter(objResponse, statusText, xhr, $form)
53. {
54.     if (statusText == "success") {
55.         // ajax 통신 성공 후 처리영역
56.         if (objResponse.strResult == "SUCCESS" ) {
57.             // 리턴받은 json 배열의 strResult 값이 "SUCCESS"일 경우 처리영역
58.         } else {
59.             // SUCCESS 이외의 값으로 리턴됐을 경우 처리영역
60.         }
61.     } else {
62.         // ajax 통신 실패 처리영역
63.     }    
64. }
65.  
66. </script>

 

그럼 요기까지 !  ajaxSubmit 포스팅 끝 ~~ !! ^^