[JS] Ajax form Submit / form 전송 / beforeSend / complete / ajax / $().submit

Excel 파일 업로드 하면서 ajaxForm Submit을 사용해보았다.
여태 ajax에는 success와 error만 있는줄 알았다.헤헿ㅎ[ㅔㅎ헤

먼저 form을 선언한다.

<form id="excelUploadForm" name="excelUploadForm" enctype="multipart/form-data" method="post" action= "${pageContext.request.contextPath}/module/excelUploadAjax">
    <input type="hidden" id="uploadState" name="uploadState" value="" />                        
        <div>                        
            <input type="file" name="excelFile" id="excelFile" class="w350" />                                                         
            <button type="button" id="addExcelImpoartBtn" class="btn input_btn_03" onclick="check()">추가</button>
        </div>                                                    
</form>

파일 업로드 하는 form이기 때문에 enctype을 multipart/form-data로 해주었다.
action에는 controller의 RequestMapping 주소와 같게 설정해준다.

버튼을 누르면 onclick 이벤트로 check() 함수로 들어가게 되는데
이 함수 안에 ajaxForm 을 선언하였다.
form의 id를 사용하여 ajaxForm 을 부르고 전송전, 전송성공시, 실패시, 완료시 동작을 지정해 주고, submit 으로 전송을 하게 된다.

제이쿼리 from을 사용하기 위해서는 플러그인을 추가해야 한다.

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>

$("#excelUploadForm").ajaxForm({
    
                    beforeSend : function() {
                        // 전송 전에 해주어야 할 행동을 선언
                    },
                    complete : function() {
                        // 전송이 성공되거나, 실패되거나 해서 이 ajaxForm이 완료되었을 때
                        // 해주어야 할 행동을 선언
                    },
                    success : function() {
                        // 전송 성공시 할 행동을 선언    
                    },
                    error : function() {
                        // 전송 오류시 할 행동을 선언    
                    }
                });
            $("#excelUploadForm").submit();

2016-10-25 추가

complete 하고 success 하고 같이 쓸 수 있는건줄 알았는데 ( 같이 쓸 수 있다고는 한다만)

그러면 두번호출이 된다고 한다. 

success 는 통신이 성공했을 때만 타는거고

complete는 통신이 실패하더라도 완료시 타게 하는거라고 한다. 

 간단ㅇㅈ?

끝