[ajax] Error code 0, error undefined
작성일자 : 2018년 11월 18일
1. 현상
HTML form 내에서 ajax를 사용하는 Javascript 함수 호출 시 간헐적 에러 발생
예시
HTML
<form onsubmit='JavaScript:example(data)> // submit 시 example 함수 실행 --------------------(2)
<!-- Logic -->
<button type="submit" value="submit"></button> //button Click 시 form에 submit 전달 --------------------(1)
</form> |
Javascript
function example(data){
// 아래 오류 발생 ajax 수행 ---------------(3) $.ajax({ method : "GET", url : "url", data : {data: data}, success: function(){ //Logic }, // 에러 발생 후 아래 함수 실행 -----------(4) error: function(request, status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); // 실행 결과 code 0, undefined Error 발생 문구 alert --------------- (5)
} }); } |
alert 내용
code : 0 message : error : undefined |
2. 원인
AJAX 응답을 받기 전에 브라우저 새로 고침이 트리거 된 경우 발생
즉 Submit에 의해 form의 (action 미 설정 시 현재위치 새로고침) action과, ajax 호출 함수인 example이 트리거 되고,
example 함수에 의한 ajax 수행 중 ajax 결과를 받기 전에 action에 의해 새로고침이 트리거 될 때 발생
응답 속도에 따라 동일한 Flow가 success가 될 수도, Fail이 될 수도 있는 상황
3. 해결방안
form에 의한 action을 없애고, ajxa 결과 반환 후 action을 수행하도록 설정
수정 후 예시
HTML
<form onsubmit='JavaScript:example(data, event)> // event 인자 추가 // submit 시 example 함수 실행 --------------------(2)
<!-- Logic -->
<button type="submit" value="submit"></button> //button Click 시 form에 submit 전달 --------------------(1)
</form> |
Javascript
function example(data, event){ event.preventDefault(); // event 중단 함수
// 아래 오류 발생 ajax 수행 ---------------(3) $.ajax({ method : "GET", url : "url", data : {data: data}, success: function(){ // Logic // Ajax 응답 후 수행 할 Action 추가 }, // 에러 발생 후 아래 함수 실행 -----------(4) error: function(request, status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); // 실행 결과 code 0, undefined Error 발생 문구 alert --------------- (5)
} }); }
|
4. 참고
https://stackoverflow.com/questions/2000609/jquery-ajax-status-code-0
