Ajax, 클릭 시 다중 요청 방지

Ajax, 클릭 시 다중 요청 방지

사용자가 로그인 또는 등록 버튼을 클릭할 때 여러 요청을 하지 않도록 합니다.이건 제 암호인데, 작동이 안 돼요.첫 번째는 잘 되고, 다음 번에는 거짓으로 돌아옵니다.

$('#do-login').click(function(e) {
    e.preventDefault();

    if ( $(this).data('requestRunning') ) {
        return;
    }

    $(this).data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            $(this).data('requestRunning', false);
        }
    });      
}); 

좋은 생각 있어요?감사합니다!

문제는 다음과 같습니다.

    complete: function() {
        $(this).data('requestRunning', false);
    }

this더 이상 버튼을 가리키지 않습니다.

$('#do-login').click(function(e) {
    var me = $(this);
    e.preventDefault();

    if ( me.data('requestRunning') ) {
        return;
    }

    me.data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            me.data('requestRunning', false);
        }
    });      
}); 

사용하다on()그리고.off()그것이 그들이 거기에 있는 이유입니다.

$('#do-login').on('click', login);

function login(e) {
    e.preventDefault();
    var that = $(this);
    that.off('click'); // remove handler
    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize()
    }).done(function(msg) {
        // do stuff
    }).always(function() {
        that.on('click', login); // add handler back after ajax
    });
}); 

ajax에서는 콘텍스트를 콜백합니다(this)가 외부 함수에서 변경되면 $.disc의 컨텍스트속성을 사용하여 동일하게 설정할 수 있습니다.

$.ajax({
    type: "POST",
    url: "/php/auth/login.php",
    data: $("#login-form").serialize(),
    context: this, //<-----
    success: function(msg) {
        //stuffs
    },
    complete: function() {
        $(this).data('requestRunning', false);
    }
});      

이 버튼을 비활성화할 수 있습니다.

$(this).prop('disabled', true);

나 또한 비슷한 문제에 직면했다.

추가 중$('#do-login').attr("disabled", true);내게 해결책을 줘.

$('#do-login').click(function(e) {
   e.preventDefault();
   $('#do-login').attr("disabled", true);
   .........
   .........

여기서do-login버튼 ID 입니다.

저는 이것을 시도해 보았고, 매우 잘 작동했습니다. $.ajax는 결과가 돌아올 때까지 더 많은 요청을 보내는 데 어려움을 겪었습니다.

 var settings = {
    "url": "/php/auth/login.php",
    "method": "POST",
    "timeout": 0,
    "async": false,
    "headers": {
        "Content-Type": "application/json; charset=utf-8"
    },
    "data": jsondata, //data pass here is in JSON format
};
$.ajax(settings).done(function (ress) {
  try{
      console.log(ress, "Result from Ajax here");
    }
    catch(error){
      alert(error);
      console.log(ress);
    }
});

async : false날 위해 일했어감사해요.

아니면 다음 날짜까지 할 수 있습니다. $(this).addClass("disabled");버튼을 클릭하거나 링크를 클릭하면 다음 작업을 수행할 수 있습니다. $(this).removeClass("disabled");.

// CSS

.disabled{
cursor: not-allowed;

}

// JQUERY

$('#do-login').click(function(e) {
   e.preventDefault();

    $(this).addClass("disabled");
    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        context: this,
        success: function(msg) {
    //do more here

           $(this).removeClass("disabled");
        },
    });
});

추신: 부트스트랩 css를 사용하는 경우 css 부품이 필요하지 않습니다.

나는 그 방법이 유용하다고 생각했다.ES6를 탑재한 jQuery의 범용 기능으로 구현했습니다.

export default function (button, promise) {
    const $button = $(button);
    const semaphore = 'requestRunning';

    if ($button.data(semaphore)) return null;
    $button.data(semaphore, true);

    return promise().always(() => {
        $button.data(semaphore, false);
    });
}

왜냐면$.ajax()약속을 반환합니다. 약속을 전달하기만 하면 나머지는 함수가 처리합니다.

대략적으로 말하면, 사용법은 다음과 같습니다.

import preventDoubleClick from './preventdoubleclick';

...

button.click(() => {
    preventDoubleClick(this, () => $.ajax()
        .done(() => { console.log("success") }));
});

이 함수는 다중 Ajax 요청을 제어하는 데 도움이 되며, 10초 후에 플래그 상태를 0으로 되돌릴 수 있는 타임아웃 함수가 있습니다(서버가 응답하는 데 10초 이상 걸린 경우).

var Request_Controller = function(Request_Name = '', Reactivate_Timeout = 10000)
{
    var a = this;
    a.Start_Request = function(){
        if(window.Requests == undefined){
            window.Requests = {};
        }
        window.Requests[Request_Name] = {'Status' : 1, 'Time': + new Date()};
    }

    a.End_Request = function(){
        if(window.Requests == undefined){
            window.Requests = [];
        }
        window.Requests[Request_Name] = undefined;
    }

    a.Is_Request_Running = function(){
        if(window.Requests == undefined || window.Requests[Request_Name] == undefined){
            return 0;
        }else{
            var Time = + new Date();
            // Reactivate the request flag if server take more than 10 sec to respond
            if(window.Requests[Request_Name]['Time'] < (Time - Reactivate_Timeout)) 
            {
                return 0;
            }else{
                return 1
            }
        }
    }
}

사용방법:

var Request_Flag = new Request_Controller('Your_Request_Name');
if(!Request_Flag.Is_Request_Running()){

    Request_Flag.Start_Request();

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            Request_Flag.End_Request();
        }
    }); 
}

전체 사이트에서 여러 개의 Ajax 요청을 방지합니다.예: 다른 ajax 페이지에서 ajax 요청을 사용하는 경우, php loop에서 ajax를 사용하는 경우, 하나의 결과로 여러 ajax 요청을 제공합니다.솔루션이 있습니다.

Use window.onload = function() { ...  } 

대신

$(document).ready(function(){ ...  });

index.main 페이지에 표시됩니다.모든 멀티 요청을 차단합니다.:)

언급URL : https://stackoverflow.com/questions/18775455/ajax-prevent-multiple-request-on-click