Як дізнатися, чи jQuery має запит Ajax на розгляд?


90

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

Річ у тім, що коли звичайний користувач вводить у нього недійсне значення і втрачає фокус, натискаючи кнопку подати, пост jQuery повертається після надсилання форми.

Чи є спосіб перевірити наявність обробки запитів Async за допомогою jQuery, щоб я не дозволив надсилання форми?

Відповіді:


37

Ви можете використовувати ajaxStart та ajaxStop для відстеження активності запитів.


Це працювало краще для мене, оскільки мій контроль багато разів відтворювався за допомогою HtmlHelper. Дякую!
sabanito

Це спрацювало для мене! Я використовував ajaxSend та ajaxSuccess, але іноді мені надсилали декілька запитів ajax, і я хотів запустити кус коду лише один раз на початку та один раз в кінці. ajaxStart і ajaxStop - це саме те, що я шукав! Дякую
ScottyG

2
У 2019 році посилання застаріли
Крістіан Ніссен,


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);
 });

Здається хорошим рішенням, але, Ви виявили будь-яку проблему з "Максимальним розміром стека дзвінків"?
Mikel

11

Функція $ .ajax () повертає об'єкт XMLHttpRequest. Зберігайте це у змінній, яка доступна з події кнопки "Надіслати" "OnClick". Коли обробляється клацання, перевірте, чи є змінна XMLHttpRequest:

1) null, що означає, що запит ще не надіслано

2) що значення readyState дорівнює 4 (завантажено). Це означає, що запит було відправлено та повернуто успішно.

У будь-якому з цих випадків поверніть true і надайте можливість продовжувати подання. В іншому випадку поверніть false, щоб заблокувати надсилання та дати користувачеві деяку інформацію про те, чому їх надсилання не працювало. :)


4
Перевірка нульового значення, щоб визначити, чи існує об’єкт запиту, є важливою, але якщо воно не є нульовим, вам слід справді перевірити, request.readyState > 0 && request.readyState < 4щоб визначити „активний” запит, оскільки readyState 0 вказує, що хоча об’єкт створений, веб-запит не ініціювався .
Nathan Taylor

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 () {

            }
        });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.