Comment savoir si jQuery a une requête Ajax en attente?

J'ai des problèmes avec un contrôle jQuery que nous avons créé. Supposons que vous ayez une liste déroulante qui vous permet d'entrer l'ID de l'élément que vous recherchez, et que lorsque vous appuyez sur ENTRÉE ou perdez le focus dans une zone de texte, il valide via jQuery que l'ID que vous avez entré est correct, affichant une alerte si ce n'est pas le cas 't.

Le fait est que lorsqu'un utilisateur ordinaire entre une valeur non valide et perd le focus en appuyant sur le bouton Soumettre, le message jQuery revient après l'envoi du formulaire.

Existe-t-il un moyen de vérifier s'il y a un traitement de demande Async par jQuery afin que je n'autorise pas l'envoi du formulaire?

Vous pouvez utiliser ajaxStart et ajaxStop pour suivre le moment où les requêtes sont actives.

$.active renvoie le nombre de requêtes Ajax actives.

Plus d'infos ici

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

La fonction $ .ajax () renvoie un objet XMLHttpRequest. Stockez cela dans une variable accessible à partir de l'événement "OnClick" du bouton Soumettre. Lorsqu'un clic d'envoi est traité, vérifiez si la variable XMLHttpRequest est:

1) nul, ce qui signifie qu'aucune demande n'a encore été envoyée

2) que la valeur readyState est 4 (Loaded). Cela signifie que la demande a été envoyée et renvoyée avec succès.

Dans l'un ou l'autre de ces cas, renvoyez true et laissez la soumission se poursuivre. Sinon, retournez false pour bloquer la soumission et donner à l'utilisateur une indication de la raison pour laquelle sa soumission n'a pas fonctionné. :)

Nous devons utiliser la méthode $ .ajax.abort () pour abandonner la requête si la requête est active. Cet objet de promesse utilise la propriété readyState pour vérifier si la demande est active ou non.

HTML

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

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

            }
        });