jQuery Отображение загрузчика Ajax во время передачи и предотвращения нескольких отправок

Question

У меня есть приложение, которое имеет несколько различных типов элементов формы, которые все отправляют данные на сервер с помощью jQuery AJAX.

Что я хочу сделать, это:

1. Показать загрузчик во время передачи AJAX
2. Запретить пользователю отправку дважды + (много нажатий)

Это легко сделать на разовой основе для каждого типа форм на сайте (комментарии, загрузка файлов и т. Д.). Но мне любопытно узнать, является ли это более глобальным способом справиться с этим?

Что-то достаточно умное, чтобы сказать:

1. Если форма отправляется на сервер и ожидает ответа, игнорируйте все отправленные сообщения
2. Показать DISABLED класс для отправленного / нажатого элемента
3. Показать класс загрузки для class="spinner", ближайшего к элементу отправки, нажатию

Что ты думаешь? Отличная идея? Сделано раньше?

Answer 1

Посмотрите на jQuery Global Ajax Event Обработчики .

В двух словах, вы можете установить события, которые происходят на каждый AJAX-запрос, следовательно,имя Глобальные обработчики событий .Есть несколько различных событий, я буду использовать ajaxStart() и ajaxComplete() в моем примере кода ниже.

Идея состоит в том, что мы показываем загрузку, отключаем форму & кнопку на событии ajaxStart()затем снова включите форму и скройте загрузочный элемент внутри события ajaxComplete().

var $form = $("form");
$form.ajaxStart(function() {

    // show loading
    $("#loading", this).show();

    // Add class of disabled to form element
    $(this).addClass("disabled");

    // Disable button
    $("input[type=submit]", this).attr("disabled", true);
});

И событие завершения AJAX

$form.ajaxComplete(function() {

    // hide loading
    $("#loading", this).hide();

    // Remove disabled class
    $(this).removeClass("disabled");

    // Re-enable button
    $("input[type=submit]", this).removeAttr("disabled");
});

Возможно, вам потребуетсятакже присоединяется к событию ajaxError в случае сбоя вызова AJAX, поскольку вам может потребоваться очистить некоторые элементы.Проверьте это и посмотрите, что произойдет с ошибочным AJAX-запросом.

PS Если вы звоните $.ajax или аналогичным ($.getJSON), вы все равно можете установить эти события с помощью $.ajaxStart и $.ajaxComplete, поскольку AJAX не привязан ни к какому элементу.Вам нужно будет немного изменить код, так как у вас не будет доступа к $(this).

Answer 2

Я считаю, что вы должны сделать 2 наверняка и 3, чтобы улучшить удобство использования вашего приложения. Лучше держать бэкенд тупым, но если у вас есть проблемы с безопасностью, вы должны решить эту проблему тоже.