¿Cómo puedo detectar un error de publicación de una consulta Ajax?

209

Me gustaría detectar el error y mostrar el mensaje apropiado si falla la solicitud de Ajax.

Mi código es el siguiente, pero no pude captar la solicitud fallida de Ajax.

function getAjaxData(id)
{
     $.post("status.ajax.php", {deviceId : id}, function(data){

        var tab1;

        if (data.length>0) {
            tab1 = data;
        }
        else {
            tab1 = "Error in Ajax";
        }

        return tab1;
    });
}

Descubrí que "Error en Ajax" nunca se ejecuta cuando falla la solicitud de Ajax.

¿Cómo manejo el error Ajax y muestro el mensaje apropiado si falla?

TTCG
fuente

Respuestas:

304

Desde jQuery 1.5 puede usar el mecanismo de objetos diferidos:

$.post('some.php', {name: 'John'})
    .done(function(msg){  })
    .fail(function(xhr, status, error) {
        // error handling
    });

Otra forma es usar .ajax:

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
        alert( "Data Saved: " + msg );
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert("some error");
  }
});
elegir
fuente
14
@Yuck $ .post puede aceptar una devolución de llamada de error utilizando objetos diferidos. Eche un vistazo a mi respuesta a continuación para ver un ejemplo.
Michael Venable el
2
Además, la forma de hacer $.ajaxmás legible es usar un hash para tu data. Por ejemplo:{ name : 'John', location: 'Boston' }
briangonzalez
3
Las devoluciones de llamada de éxito y error anteriores son obsoletas a partir de jQuery 1.8 api.jquery.com/jQuery.post
Baldy
@MichaelVeneble creo que puedes usar$.post().error()
clintgh
288

jQuery 1.5 agregó objetos diferidos que manejan esto muy bien. Simplemente llame $.posty adjunte los controladores que desee después de la llamada. Los objetos diferidos incluso le permiten adjuntar múltiples controladores de éxito y error.

Ejemplo:

$.post('status.ajax.php', {deviceId: id})
    .done( function(msg) { ... } )
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
    });

Antes de jQuery 1.8, la función donese llamaba successy failse llamaba error.

Michael Venable
fuente
3
+1 Muy agradable, pero aún no está loco por la sintaxis. Esperemos que se unifique en una versión futura.
Yuck
25
Esta debería ser la respuesta aceptada. La respuesta actual aceptada es "usar un método diferente"; esta respuesta dice "aquí está cómo hacer que su método funcione". Este último generalmente se prefiere en SO. En realidad, esto debería incluirse en la documentación $ .post !!!
Mark E. Haase
Por cierto, también hay una responseJSONpropiedad que también es muy útil en caso de que el tipo ajax sea json.
ivkremer
91
$.ajax({
  type: 'POST',
  url: 'status.ajax.php',
  data: {
     deviceId: id
  },
  success: function(data){
     // your code from above
  },
  error: function(xhr, textStatus, error){
      console.log(xhr.statusText);
      console.log(textStatus);
      console.log(error);
  }
});
jAndy
fuente
15
$.post('someUri', { }, 
  function(data){ doSomeStuff })
 .fail(function(error) { alert(error.responseJSON) });
Marknery
fuente
55
Agregar un poco más de explicación aquí ayudaría a los futuros lectores.
Eric Brown
13

Una forma simple es implementar ajaxError :

Cada vez que una solicitud de Ajax se completa con un error, jQuery activa el evento ajaxError. Todos y cada uno de los controladores que se han registrado con el método .ajaxError () se ejecutan en este momento.

Por ejemplo:

$('.log').ajaxError(function() {
  $(this).text('Triggered ajaxError handler.');
});

Sugeriría leer la documentación de ajaxError . Hace más que el simple caso de uso demostrado anteriormente, principalmente su devolución de llamada acepta una serie de parámetros:

$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).text('Triggered ajaxError handler.');
  }
});
karim79
fuente
1
1 - Añado que este controlador se pone varios argumentos, por lo que puede mostrar el error real, código de respuesta, URL, etc.
Nick Craver
Tenga en cuenta que a partir de jQuery 1.8, el método .ajaxError () solo debe adjuntarse al documento.
Nanki
0

Debe registrar la respuesta Texto:

$.ajax({
    type: 'POST',
    url: 'status.ajax.php',
    data: {
    deviceId: id
  }
})
.done(
 function (data) {
  //your code
 }
)
.fail(function (data) {
      console.log( "Ajax failed: " + data['responseText'] );
})
manolo
fuente
0

adjunta el controlador .onerror al objeto ajax, por qué las personas insisten en publicar JQuery para obtener respuestas cuando vanila trabaja en plataformas cruzadas ...

ejemplo rápido:

ajax = new XMLHttpRequest();
ajax.open( "POST", "/url/to/handler.php", true );
ajax.onerror = function(){
    alert("Oops! Something went wrong...");
}
ajax.send(someWebFormToken );
Mark Giblin
fuente