Как узнать, есть ли в jQuery ожидающий запрос Ajax?

90

У меня проблемы с созданным нами элементом управления jQuery. Предположим, у вас есть раскрывающийся список, который позволяет вам ввести идентификатор элемента, который вы ищете, и когда вы нажимаете ENTER или теряете фокус в текстовом поле, он проверяет через jQuery, что введенный вами идентификатор правильный, показывая предупреждение, если это не так. т.

Дело в том, что когда обычный пользователь вводит в него недопустимое значение и теряет фокус, нажимая кнопку отправки, сообщение jQuery возвращается после отправки формы.

Есть ли способ проверить, есть ли обработка запросов Async с помощью jQuery, чтобы я не разрешил отправку формы?

jquery ajax xmlhttprequest Sabanito
источник

Ответы:

37

Вы можете использовать ajaxStart и ajaxStop, чтобы отслеживать, когда запросы активны.

Ceejayoz
источник
У меня это сработало лучше, так как мой элемент управления много раз отображался с помощью HtmlHelper. Спасибо!
sabanito
Это сработало для меня! Я использовал ajaxSend и ajaxSuccess, но иногда мне отправляли несколько запросов ajax, и я хотел только один раз запустить кусок кода в начале и один раз в конце. ajaxStart и ajaxStop были именно тем, что я искал! Спасибо
ScottyG 05
2
В 2019 году ссылки устарели
Кристиан Ниссен
229

$.active возвращает количество активных запросов Ajax.

Больше информации здесь

Шивабудх
источник
Это фактически отвечает на вопрос. Благодарю.
Дэйв Саломон,
Один лайнер и короткое решение очень приятные
MSTdev
25 
 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });
Etgregor
источник
Кажется, хорошее решение, но обнаруживали ли вы какие-либо проблемы с «Максимальным размером стека вызовов»?
Mikel
11

Функция $ .ajax () возвращает объект XMLHttpRequest. Сохраните это в переменной, доступной из события «OnClick» кнопки «Отправить». Когда обрабатывается щелчок отправки, проверьте, имеет ли переменная XMLHttpRequest:

1) null, что означает, что запрос еще не отправлен

2), что значение readyState равно 4 (загружено). Это означает, что запрос был отправлен и успешно возвращен.

В любом из этих случаев верните true и разрешите продолжение отправки. В противном случае верните false, чтобы заблокировать отправку и дать пользователю некоторое представление о том, почему его отправка не сработала. :)

Тодзи
источник
4
Проверка на null, чтобы определить, существует ли объект запроса, важна, но если он не равен null, вам действительно следует проверить, request.readyState > 0 && request.readyState < 4чтобы определить `` активный '' запрос, потому что readyState 0 указывает, что, хотя объект был создан, веб-запрос не был инициирован .
Натан Тейлор
1

Мы должны использовать метод $ .ajax.abort (), чтобы прервать запрос, если запрос активен. Этот объект обещания использует свойство readyState, чтобы проверить, активен ли запрос или нет.

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

Код JS

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });
вибрации2006
источник