ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다.
통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다.
시간이 지연되는 서비스의 경우 로딩바 없이 현재 화면을 보고 있어야 하는 현상이 생깁니다.
ajax async: false (동기식) 처리 시 로딩바 구현 방법입니다.
1. ajax 호출 전 로딩바를 먼저 호출합니다.
2. setTimeout을 호출 후 ajax 로 진입하게 합니다.
3. ajax를 async: false로 비동기식 통신을 합니다.
4. 통신이 끝나면 complete:function()로 로딩바를 해제합니다.
<!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로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
*/
// 로딩바를 보여 준다.
$('#loadimg').css('display','block');
setTimeout(function() {
$.ajax({
url:'[주소]',
type:'post',
data:$('form').serialize(),
dataType:'json',
// 다른 페이지를 처리 후에 결과가 성공일 때
// 비동기식으로 처리를 함
async: false,
success:function(data)
{
var message = data.message;
// 결과값이 성공이면 전송 여부는 true
if ( message == 'Success' ) {
}
else {
}
},
error:function(request, status, error)
{ // 오류가 발생했을 때 호출된다.
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
},
complete:function()
{
// 로딩바를 해제한다.
$('#loadimg').css('display','none');
}
});
}) // End $.ajax(
}, 0); // End setTimeout(function()
</script>
</body>
</html>
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
'유용한 활용팁' 카테고리의 다른 글
| 리눅스 tail -f |grep -wi 로 특정 단어가 포함된 행만 출력하게 하기 (0) | 2020.03.10 |
|---|---|
| Javascript ajax 동기식으로 처리 후 jquery submit 처리하기 - $.when, currentTarget (0) | 2020.03.09 |
| Javascript jquery submit 이벤트 시 submit 제어하기 (2) | 2020.03.04 |
| Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false (0) | 2020.03.03 |
| CentOS 7 mariaDB에서 Specified key was too long; max key length is 767 bytes 에러 해결 방법 (0) | 2020.02.29 |