web-dev-qa-db-fra.com

Comment savoir si jQuery a une demande Ajax en attente?

J'ai quelques problèmes avec un contrôle jQuery que nous avons créé. Supposons que vous disposiez d’une liste déroulante vous permettant de saisir l’ID de l’élément recherché. Lorsque vous appuyez sur la touche ENTREE ou si vous perdez la mise au point dans une zone de texte, cela confirme via jQuery que l’ID que vous avez entré est correct. 't.

Le fait est que lorsqu'un utilisateur ordinaire entre une valeur non valide dans celle-ci et perd le focus en appuyant sur le bouton d'envoi, la publication jQuery est renvoyée après l'envoi de la soumission du formulaire.

Existe-t-il un moyen de vérifier si une requête asynchrone est traitée par jQuery afin d'empêcher le formulaire de se soumettre?

jqueryajaxxmlhttprequest
82
sabanito

Vous pouvez utiliser ajaxStart et ajaxStop pour savoir quand les demandes sont actives.

36
ceejayoz

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

Plus d'infos ici

215
sivabudh
 $(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);
 });
24
etgregor

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

1) null, 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, retourne la valeur true et permet à la soumission de continuer. Sinon, retournez false pour bloquer l'envoi et donner à l'utilisateur une indication de la raison pour laquelle l'envoi a échoué. :)

10
Toji

Nous devons utiliser la méthode $. Ajax.abort () pour abandonner la requête si celle-ci 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 () {

            }
        });
1
vibs2006