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

J’ai des problèmes avec un contrôle jQuery que nous avons fait. Supposons que vous ayez une liste déroulante vous permettant de saisir l’ID de l’élément que vous recherchez et lorsque vous appuyez sur ENTRÉE ou que vous perdez le focus dans une zone de texte, elle valide via jQuery que l’ID entré est correct. ‘t.

La chose est que lorsqu’un utilisateur ordinaire entre une valeur non valide et perd le focus en appuyant sur le bouton Envoyer, le message jQuery retourne après l’envoi du formulaire.

Est-il possible de vérifier si jQuery traite le traitement des requêtes Async afin que le formulaire ne soit pas autorisé?

Vous pouvez utiliser ajaxStart et ajaxStop pour savoir quand 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 object XMLHttpRequest. Stockez-le dans une variable accessible à partir de l’événement “OnClick” du bouton Envoyer. 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, renvoyer true et autoriser l’envoi à continuer. Sinon, retournez false pour bloquer l’envoi et indiquez à l’utilisateur pourquoi leur soumission n’a pas fonctionné. 🙂

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

HTML

 

Cancel Ajax Request on Demand

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