Ajax로 서버에 보낼때 중복으로 보내지지 않게 하는 방법이 있나요 ?

Question

Ajax로 서버에 보낼때 중복으로 보내지지 않게 하는 방법이 있나요 ?

조회수 5557회

fast-frontend

ajax

double

submit

0

싫어요

중복 이벤트

버튼을 클릭한 후 사용자가 작성한 정보를 비동기 통신으로 서버에 보낼 때 중복으로 보내지는 현상이 일어나지 않도록 하는 방법이 있나요?

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 2 · Accepted Answer

안녕하세요 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);