ajax 통신은 비동기식 통신입니다.
onsubmit 이벤트에서 ajax 통신을 할 때, ajax 통신 결과와는 상관없이 submit 처리를 합니다.
그래서 async: false 와 event.preventDefault(); 로 처리를 할 수 있습니다.
이렇게 하게 하면 ajax 통신 결과 리턴 시간이 지연 될 것을 감안하여 올리는 로딩바가 구현이 되지 않습니다.
이 경우에는 로딩바를 먼저 노출되도록 처리를 하고 ajax 통신을 setTimeout과 결합하여 사용하면 로딩바가 나오게 됩니다.
최종적으로 ajax 통신 결과가 성공 일 때 submit이 안되는 현상이 발생을 하였습니다.
이 현상의 해법은 $.when($.ajax()).done().fail()과 currentTarget.submit()입니다.
며칠 동안 포스팅 했던 내용의 완결판입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name="theForm" action="" method="post" id="theForm">
<input type="submit" />
</form>
<script>
$('#theForm').submit(function(event){
// 자동 submit을 시키는 것을 막는다.
event.preventDefault();
/**
* 입력 필드 validattion check 로직
*/
/**
* ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
*/
// ajax 통신을 설정합니다.
var when =
$.ajax({
url:'[주소]',
type:'post',
data:$('form').serialize(),
dataType:'json'
});
// 로딩바를 보여 준다.
$('#loadimg').css('display','block');
$.when(when)
.done(function(data)
{
var message = data.message;
if ( message == 'Success' )
{
//console.log('success');
// 성공일 때 form submit을 합니다.
event.currentTarget.submit();
}
else
{
// 안내 메시지를 보여준다.
alert('안내 메시지');
// 에러가 발생하면 모달창을 닫는다.
$('#모달창 id').modal('hide');
}
})
.fail(function(request, status, error)
{
// 통신 실패하였을 때
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
// 안내 메시지를 보여준다.
alert('안내 메시지');
// 에러가 발생하면 모달창을 닫는다.
$('#모달창 id').modal('hide');
})
.always(function (data, status, responseObj)
{
// 성공 실패와 상관 없이 항상 처리를 하는 내용을 담습니다.
//console.log(data);
// 로딩바를 해제한다.
$('#loadimg').css('display','none');
});
})
</script>
</body>
</html>
2020/03/05 - [유용한 활용팁] - Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법.
Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법
ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다. 통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다. 시간이 지연되는 서비스의 경..
han288.tistory.com
2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기
Javascript jquery submit 이벤트 시 submit 제어하기
지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다. 결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는 버그를..
han288.tistory.com
2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false
Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false
Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다. 1. ajax 설정 값 중 async를 false로 설정합니다. - async: false 는 동기식 즉 절차적으로 처리를 한다는 의..
han288.tistory.com
'유용한 활용팁' 카테고리의 다른 글
| 파이썬 웹 연동 기초 HTML 페이지 만들기 (0) | 2020.03.12 |
|---|---|
| 리눅스 tail -f |grep -wi 로 특정 단어가 포함된 행만 출력하게 하기 (0) | 2020.03.10 |
| Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법 (5) | 2020.03.05 |
| Javascript jquery submit 이벤트 시 submit 제어하기 (2) | 2020.03.04 |
| Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false (0) | 2020.03.03 |