본문 바로가기

script&css&html&ajax

ajax 요청시 이전 요청이 종료전 다시 요청이 오면 이전 요청 종료

이전 AJAX 요청이 아직 완료되지 않은 경우에만, 현재 요청을 취소하고 새로운 요청을 시작합니다.

이렇게 하면 여러번 클릭하더라도 마지막 요청만 실행되며 이전 요청은 취소됩니다.

var ajaxRequest = null;

// 체크박스 클릭 이벤트 리스너
$('input[type="checkbox"]').on('click', function() {
    if (ajaxRequest !== null) {
        // 이전 요청이 아직 완료되지 않았으면 취소
        ajaxRequest.abort();
    }

    // AJAX 요청 시작
    ajaxRequest = $.ajax({
        url: 'your_action_result_url_here',
        method: 'POST', // 또는 'GET' 또는 다른 HTTP 메서드
        data: {
            // 요청 데이터 설정
        },
        success: function(response) {
            // AJAX 요청 성공 시 실행되는 코드
            console.log('성공:', response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // AJAX 요청 오류 시 실행되는 코드
            console.error('오류:', textStatus, errorThrown);
        },
        complete: function() {
            // AJAX 요청 완료 후 실행되는 코드
            ajaxRequest = null; // 요청이 완료되었으므로 null로 재설정
        }
    });
});