Предотвратить множественные вызовы веб-службы через JQuery AJAX

Question

Я начинаю интегрировать некоторые вызовы jQuery в мои классические страницы ASP, но хочу запретить пользователю многократно нажимать кнопки и отправлять несколько запросов к серверу.Какой хороший практический способ сделать это?

Answer 1

Это действительно зависит от того, как выглядит ваш .ajax() вызов.

Например, вы можете отключить кнопку, которая отправляет вызов .ajax(), используя beforeSend функция.Затем включите его снова, когда вы получите success или error:

$('#test').click(function() {
    var obj = $(this);
    $.ajax({
        beforeSend: function() {
            toggleBtn(obj);
        },
        url: '/echo/html/',
        data: 'whatever',
        success: function(data) {
            // Do whatever with data....
                alert("While an alert is showing, the JS is paused, look at the button. After clicking ok, its going to be enabled.");
            toggleBtn(obj);
        },
        error: function() {
            // Do whatever with the error.....
            // Re-enable the button, you need to do this, otherwise on an error
            // the user couldn't try again without reloading the page.
            toggleBtn(obj);        
        }
    }); 
});

См. Демоверсию здесь

Использованиепростая функция обертки, позволяющая вам повторно использовать код:

function toggleBtn(obj) {
    if (obj.attr('disabled') == true) {
        obj.attr('disabled', false);
    }  
    else {
        obj.attr('disabled', true);    
    }
}

В качестве альтернативы вы можете прикрепить .ajaxStart() и .ajaxStop() к щелчкуevent:

$('#test').click(function() {
    $.ajax({
        url: '/echo/html/',
        data: 'whatever',
        success: function(data) {
            // Do whatever with data....
                alert("While an alert is showing, the JS is paused, look at the button. After clicking ok, its going to be enabled.");
        },
    }); 
}).ajaxStart(function() {
    toggleBtn($(this));
}).ajaxStop(function() {
    toggleBtn($(this));
});

См. демонстрационную версию здесь

Другим способом было бы отключение ВСЕХ вызовов ajax во время одного из них.Чтобы сделать это, вы можете дать всем вашим Ajax-кнопкам класс.Затем прикрепите .ajaxStart() и .ajaxStop() к документу:

$(document).ajaxStart(function(e) {
    toggleBtn($('.ajax'));
}).ajaxStop(function() {
    toggleBtn($('.ajax'));
});

См. Демонстрацию здесь

ПРИМЕЧАНИЕ: предупреждение состоит в том, чтобы просто приостановить выполнение JS, чтобы вы могли увидеть, что кнопка действительно отключена, иначе это может произойти слишком быстро, чтобы увидеть, что происходит.

Конечно, вы также можете добавить опцию async: false,, что означает, что скрипт будет приостановлен, пока не получит результат.

Answer 2

http://jquery.malsup.com/block/ - очень хороший плагин jquery, который можно использовать именно для этого.

Или вы можете использовать события, доступные в jquery.

ajaxStart ()

и

ajaxComplete ()

Вы можете использовать эти две функции для создания собственной функции, которую вы запускаете при вызове ajax.