¿Cómo puedo saber si jQuery tiene pendiente una solicitud de Ajax?

Question

Tengo algunos problemas con el control de jQuery que hicimos. Supongamos que tiene una lista desplegable que le permite ingresar el ID del artículo que está buscando, y cuando presiona ENTRAR o pierde el foco en un cuadro de texto, valida a través de jQuery que el ID que ingresó es correcto, mostrando una alerta si no lo hace 't.

El caso es que cuando un usuario ordinario ingresa un valor no válido en él y pierde el foco al presionar el botón de enviar, la publicación jQuery vuelve después de que se haya enviado el formulario.

¿Hay alguna manera de que pueda verificar si hay jpeg de procesamiento de solicitud Async para que no permita el envío del formulario?

Answer 1

Puede usar ajaxStart y ajaxStop para realizar un seguimiento de cuándo las solicitudes están activas.

Answer 2

La función $ .ajax() devuelve un objeto XMLHttpRequest. Almacene eso en una variable que sea accesible desde el evento "OnClick" del botón Enviar. Cuando un clic se procesa presentar comprobación para ver si la variable es XMLHttpRequest:

1) nulo, lo que significa que no hay petición ha sido enviada todavía

2) que el valor es readyState 4 (cargado). Esto significa que la solicitud ha sido enviada y devuelta con éxito.

En cualquiera de esos casos, devuelva verdadero y permita que el envío continúe. De lo contrario, devuelve false para bloquear el envío y dale al usuario alguna indicación de por qué su envío no funcionó. :)

Answer 3

$.active devuelve el número de solicitudes de Ajax activas.

Más información here

Answer 4

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

Answer 5

Este método utiliza el violín $ .ajax.abort() para cancelar la solicitud si está activo. Utiliza la propiedad readyState para verificar si la solicitud está activa o no.

Esta es Working Fiddle

HTML

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

Código 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() { 

      } 
     });