[jQuery] ajaxSubmit() - form 태그 submit 비동기 처리

ajaxSubmit() ❓

 

jQuery 플러그인으로 form태그 내부의 데이터를 비동기 처리해 줌

 

특징
1️⃣ submit이지만 비동기로 처리할 수 있음

2️⃣ 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있음

주의점

submit기능 동작 정의 후 return false;를 해줘야 함
이 부분을 처리하지 않으면 아무리 success, error옵션을 처리하여도 페이지가 submit이 먹히기 때문에 페이지 리로드 현상이 발생하고 결과값에 따른 동작(alert() 메시지 출력)을 정상적으로 처리 할 수 없음

 

---

사용 예시

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>

 

---

참고 자료 👉 http://www.joshi.co.kr/index.php?mid=board_nCHS89&document_srl=306857