2 답변

  • 좋아요

    2

    싫어요
    채택 취소하기

    안녕하세요 IoIetc님 :-)

    질문주신 내용에서 핵심은 Ajax 전송 요청 중에 동일한(중복) 요청을 받지 않는 것을 말하는 것이 아닌가 생각됩니다.

    이 문제를 해결하는 방책 중 가장 손쉬운 방법은 상태 변수를 만들어 사용하는 것입니다. 전송 유무 상태에 따라 Ajax 요청을 하거나, 차단하는 것이죠.

    전송 상태는 초기에 false 일 것이고, 버튼 클릭 시 조건 처리를 통해 false 일 경우에만 요청을 하도록 설정하는 것입니다. 전송 중인 상태일 때는 상태 변수 값을 true로 설정하여, 혹시나 전송 중에 사용자가 다시 클릭 하더라도 전송 요청을 하지 않도록 차단합니다.

    전송이 완료되면 성공, 실패와 상관없이 전송 상태 변수 값을 false로 항상(always) 변경해서 전송이 완료된 이후 다시 클릭 가능하도록 만들어 줍니다.

    코드는 다음과 같이 작성하면 됩니다. 참고해보세요. :)

    // Ajax 전송 버튼
    var ajaxButton = document.querySelector('.ajax-button');
    
    // 전송 상태 설정: false
    var isSubmitted = false;
    
    var ajaxSend = function() {
    
      // 전송 상태가 false일 경우, 조건 처리
      if ( !isSubmitted ) {
        // 전송 상태 변경: true
        isSubmitted = true;
        // 버튼 요소의 disabled 속성 추가
        ajaxButton.setAttribute('disabled', 'disabled');
    
        // Ajax 서버 통신 코드
        $.ajax({...}).always(function(){
          // 전송 성공, 실패와 상관 없이 전송 상태 변경: false
          isSubmitted = false;
          // 버튼 요소의 disabled 속성 제거
          ajaxButton.removeAttribute('disabled');
        }); 
    
      }
    };
    
    // Ajax 전송 버튼 이벤트 핸들링
    ajaxButton.addEventListener('click', ajaxSend);
    
    • 이해하기 쉽게 설명해주셔서 감사합니다~! loletc 2018.6.26 10:16
  • 질문하시는 것은 double submit problem이라는 것입니다.

    1. 프론트 JS에서는 preventDefault()attr('disabled', true) 등을 사용해서 "버튼 클릭" 직후의 중복 발송처리 방지를 해야 합니다.
    2. 백엔드에서는 요청/응답에 타임스탬프를 넣거나 특정 토큰을 발급하거나 하는 방식으로 중복 요청처리 방지를 해야 합니다. 얼마나 완벽하게 더블서브밋을 방지해야 하느냐에 따라서 로직은 다양해질 수 있겠습니다.
    • 답변 감사합니다~ loletc 2018.6.26 10:15

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.