ajax form 전송 및 로딩 보이게 .. 질문입니다.

ajax form 전송 및 로딩 보이게 .. 질문입니다.

QA

ajax form 전송 및 로딩 보이게 .. 질문입니다.

본문

https://han288.tistory.com/71

이분거 찾아서 테스트 했는데요

 


<!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>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,555 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT