ajax form 전송 및 로딩 보이게 .. 질문입니다.
본문
이분거 찾아서 테스트 했는데요
<!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">
<button class="send_btn" type="submit" id="btn_submit"><p class="send_t">신청하기</p></button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#theForm').submit(function(event){
// 자동 submit을 시키는 것을 막는다.
event.preventDefault();
/**
* 입력 필드 validattion check 로직
*/
/**
* ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
*/
// 로딩바를 보여 준다.
$('#loadimg').css('display','block');
setTimeout(function() {
$.ajax({
url:'update.php',
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>
잘 안되서 질문드립니다.
위 코드와 같이
이렇습니다.
신청하기를 누른다 ---> update.php 가 지연될시 로딩화면을 보여준다...
update.php 가 완료되면 update.php 에 결과값에 따라 이동한다..
입니다. ㅠ 한번 봐주세요
감사합니다.
답변 2
전지전능하신 ChatGPT님의 답변입니다. 정확하지 않을 수 있습니다.
코드에 몇 가지 개선할 점이 보입니다. 가장 중요한 것은 setTimeout 함수 사용과 async: false 설정입니다. async: false는 비동기 AJAX 호출을 동기식으로 변경하며, 이는 사용자 인터페이스의 응답성을 저하시키고, 최신 웹 개발 관행에도 권장되지 않습니다. setTimeout 함수에 전달된 두 번째 인자 0은 실제로 필요하지 않으며, 이 코드는 AJAX 요청을 지연시키기 위해 사용되었을 수 있습니다. 하지만 이는 비효율적이며 불필요한 복잡성을 추가합니다.
또한, $('form').serialize()를 사용할 때, 여러 폼이 페이지에 존재한다면 예상치 못한 결과를 초래할 수 있습니다. 이 경우, $(this).serialize()를 사용하여 현재 제출된 폼의 데이터만을 직렬화하는 것이 좋습니다.
다음은 개선된 코드 예시입니다:
$('#theForm').submit(function(event) {
event.preventDefault(); // 자동 submit을 방지
// 입력 필드 validation check 로직을 여기에 추가
$('#loadimg').css('display', 'block'); // 로딩바 표시
$.ajax({
url: 'update.php',
type: 'post',
data: $(this).serialize(), // 현재 폼의 데이터를 직렬화
dataType: 'json',
success: function(data) {
var message = data.message;
// 결과값이 성공이면 전송 여부는 true
if (message == 'Success') {
// 성공 로직 처리
console.log("Update successful");
} else {
// 실패 로직 처리
console.log("Update failed");
}
},
error: function(request, status, error) {
console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
},
complete: function() {
$('#loadimg').css('display', 'none'); // 로딩바 숨기기
}
});
});
이 코드는 다음과 같은 개선을 제공합니다:
async: false를 제거하여 AJAX 호출이 비동기적으로 처리되도록 합니다. 이는 페이지의 응답성을 향상시킵니다.setTimeout호출을 제거하고, AJAX 요청을 직접 실행하여 코드의 복잡성을 줄입니다.- 현재 폼(
$(this))의 데이터만 직렬화하여, 예상치 못한 폼 데이터의 전송을 방지합니다. - 성공과 실패 상태를 처리하는 로직에서 구체적인 작업을 추가할 수 있도록 했습니다. (예를 들어, 성공 시 로그를 출력)
이러한 변경을 통해 코드의 가독성과 유지 관리가 용이해지며, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다
#loadimg에 해당하는 레이어를 하나 만들면 됩니다
<style>
#loadimg{ position:fixed; top:0; left:0; width:100%; height:600px; z-index:999; background:rgba(0,0,0, 0,6); display:none;}
</style>
<div id="loadimg">로딩 gif 이미지</div>