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?

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

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.


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

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

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

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

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 );
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.