Comment détecter une erreur de publication de requête Ajax?


209

Je voudrais attraper l'erreur et afficher le message approprié si la demande Ajax échoue.

Mon code est le suivant, mais je n'ai pas réussi à intercepter la demande Ajax en échec.

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

J'ai découvert que, "Erreur dans Ajax" n'est jamais exécuté lorsque la demande Ajax a échoué.

Comment gérer l'erreur Ajax et afficher le message approprié en cas d'échec?

Réponses:


304

Depuis jQuery 1.5, vous pouvez utiliser le mécanisme des objets différés:

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

Une autre façon utilise .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");
  }
});

14
@Yuck $ .post peut accepter un rappel d'erreur en utilisant des objets différés. Jetez un oeil à ma réponse ci-dessous pour un exemple.
Michael Venable

2
De plus, la manière la $.ajaxplus lisible consiste à utiliser un hachage pour votre fichier data. Par exemple:{ name : 'John', location: 'Boston' }
briangonzalez

3
Les rappels de réussite et d'erreur ci-dessus sont obsolètes depuis jQuery 1.8 api.jquery.com/jQuery.post
Baldy

@MichaelVeneble je pense que vous pouvez utiliser$.post().error()
clintgh

288

jQuery 1.5 a ajouté des objets différés qui gèrent bien cela. Appelez $.postet attachez simplement les gestionnaires que vous souhaitez après l'appel. Les objets différés vous permettent même d'attacher plusieurs gestionnaires de réussite et d'erreur.

Exemple:

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

Avant jQuery 1.8, la fonction doneétait appelée successet a failété appelée error.


3
+1 Très sympa, mais toujours pas fou de la syntaxe. Espérons que cela sera unifié dans une prochaine version.
Beurk

25
Cela devrait être la réponse acceptée. La réponse actuellement acceptée est "utiliser une méthode différente"; cette réponse dit "voici comment faire fonctionner votre méthode". Ce dernier est généralement préféré sur SO. En fait, cela devrait être inclus dans la documentation $ .post !!!
Mark E. Haase


Au fait, il y a aussi une responseJSONpropriété qui est également très pratique dans le cas du type ajax 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);
  }
});

15
$.post('someUri', { }, 
  function(data){ doSomeStuff })
 .fail(function(error) { alert(error.responseJSON) });

5
L'ajout d'un peu plus d'explications ici aiderait les futurs lecteurs.
Eric Brown

13

Un moyen simple consiste à implémenter ajaxError :

Chaque fois qu'une demande Ajax se termine avec une erreur, jQuery déclenche l'événement ajaxError. Tous les gestionnaires qui ont été enregistrés avec la méthode .ajaxError () sont exécutés à ce moment.

Par exemple:

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

Je suggère de lire la documentation ajaxError . Il fait plus que le simple cas d'utilisation démontré ci-dessus - principalement son rappel accepte un certain nombre de paramètres:

$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).text('Triggered ajaxError handler.');
  }
});

1
+1 - J'ajouterais que ce gestionnaire obtient plusieurs arguments, vous pouvez donc afficher l'erreur réelle, le code de réponse, l'URL, etc.
Nick Craver

Notez qu'à partir de jQuery 1.8, la méthode .ajaxError () ne doit être attachée qu'au document.
Nanki du

0

Vous devez enregistrer le responseText:

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

0

vous attachez le gestionnaire .onerror à l'objet ajax, pourquoi les gens insistent pour publier JQuery pour les réponses lorsque vanila fonctionne sur plusieurs plates-formes ...

exemple rapide:

ajax = new XMLHttpRequest();
ajax.open( "POST", "/url/to/handler.php", true );
ajax.onerror = function(){
    alert("Oops! Something went wrong...");
}
ajax.send(someWebFormToken );
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.