Jak wychwycić błąd wysłania zapytania Ajax?

209

Chciałbym złapać błąd i pokazać odpowiedni komunikat, jeśli żądanie Ajax się nie powiedzie.

Mój kod wygląda następująco, ale nie udało mi się złapać nieudanego żądania 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;
    });
}

Dowiedziałem się, że „Błąd w Ajax” nigdy nie jest wykonywany, gdy żądanie Ajax nie powiodło się.

Jak obsłużyć błąd Ajax i wyświetlić odpowiedni komunikat, jeśli się nie powiedzie?

TTCG
źródło

Odpowiedzi:

304

Od jQuery 1.5 możesz używać mechanizmu odroczonych obiektów:

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

Innym sposobem jest użycie .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");
  }
});
wybrać
źródło
14
@Yuck $ .post może zaakceptować oddzwonienie błędu przy użyciu odroczonych obiektów. Spójrz na moją odpowiedź poniżej na przykład.
Michael Venable
2
Ponadto, aby zwiększyć $.ajaxczytelność, należy użyć skrótu dla swojego data. Na przykład:{ name : 'John', location: 'Boston' }
briangonzalez
3
Informacje zwrotne dotyczące powodzenia i błędów są nieaktualne od dnia jQuery 1.8 api.jquery.com/jQuery.post
Baldy
@MichaelVeneble, myślę, że możesz użyć$.post().error()
clintgh
288

jQuery 1.5 dodało odroczone obiekty, które ładnie sobie z tym radzą. Wystarczy zadzwonić $.posti załączyć dowolne osoby obsługijące po zakończeniu rozmowy. Odroczone obiekty pozwalają nawet dołączyć wiele programów obsługi błędów i błędów.

Przykład:

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

Przed wersją jQuery 1.8 funkcja donezostała wywołana successi failzostała wywołana error.

Michael Venable
źródło
3
+1 Bardzo fajnie, ale nadal nie szaleje na temat składni. Mamy nadzieję, że zostanie on ujednolicony w przyszłej wersji.
Fuj
25
To powinna być zaakceptowana odpowiedź. Obecnie akceptowana odpowiedź brzmi „użyj innej metody”; ta odpowiedź mówi „oto jak sprawić, by twoja metoda działała”. Ten ostatni jest zwykle preferowany na SO. Właściwie powinno to zostać uwzględnione w dokumentacji $ .post !!!
Mark E. Haase,
Nawiasem mówiąc, istnieje również responseJSONwłaściwość, która jest bardzo przydatna w przypadku typu 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);
  }
});
jAndy
źródło
15
$.post('someUri', { }, 
  function(data){ doSomeStuff })
 .fail(function(error) { alert(error.responseJSON) });
markery
źródło
5
Dodanie nieco więcej wyjaśnień pomoże przyszłym czytelnikom.
Eric Brown
13

Prostym sposobem jest zaimplementowanie ajaxError :

Ilekroć żądanie Ajax zakończy się błędem, jQuery wyzwala zdarzenie ajaxError. W tej chwili wykonywane są wszystkie procedury obsługi zarejestrowane za pomocą metody .ajaxError ().

Na przykład:

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

Sugerowałbym przeczytanie dokumentacji ajaxError . Robi coś więcej niż prosty przypadek użycia pokazany powyżej - głównie jego wywołanie zwrotne akceptuje szereg parametrów:

$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).text('Triggered ajaxError handler.');
  }
});
karim79
źródło
1
+1 - Dodam, że ten moduł obsługi otrzymuje kilka argumentów, dzięki czemu można wyświetlić rzeczywisty błąd, kod odpowiedzi, adres URL itp.
Nick Craver
Zauważ, że od jQuery 1.8 metoda .ajaxError () powinna być dołączana tylko do dokumentu.
Nanki
0

Musisz zalogować tekst odpowiedzi:

$.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
źródło
0

dołączasz procedurę obsługi .onerror do obiektu ajax, dlaczego ludzie nalegają na opublikowanie JQuery w celu uzyskania odpowiedzi, gdy vanila działa na różnych platformach ...

szybki przykład:

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