Bagaimana cara menangkap kesalahan posting permintaan Ajax?


209

Saya ingin menangkap kesalahan dan menampilkan pesan yang sesuai jika permintaan Ajax gagal.

Kode saya seperti berikut ini, tetapi saya tidak dapat mengatur untuk menangkap permintaan Ajax yang gagal.

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

Saya menemukan bahwa, "Kesalahan dalam Ajax" tidak pernah dieksekusi ketika permintaan Ajax gagal.

Bagaimana saya menangani kesalahan Ajax dan menampilkan pesan yang sesuai jika gagal?

Jawaban:


304

Karena jQuery 1.5 Anda dapat menggunakan mekanisme objek yang ditangguhkan:

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

Cara lain menggunakan .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 dapat menerima panggilan balik kesalahan menggunakan objek yang ditangguhkan. Lihatlah jawaban saya di bawah ini sebagai contoh.
Michael Venable

2
Juga, saya cara untuk membuat $.ajaxlebih mudah dibaca adalah menggunakan hash untuk blog Anda data. Misalnya:{ name : 'John', location: 'Boston' }
briangonzalez

3
Keberhasilan dan kesalahan callback di atas sudah usang pada jQuery 1.8 api.jquery.com/jQuery.post
Baldy

@MichaelVeneble saya pikir Anda bisa menggunakan$.post().error()
clintgh

288

jQuery 1.5 menambahkan objek yang ditangguhkan yang menangani ini dengan baik. Cukup panggil $.postdan lampirkan semua penangan yang Anda inginkan setelah panggilan. Objek yang ditangguhkan bahkan memungkinkan Anda untuk melampirkan beberapa penangan sukses dan kesalahan.

Contoh:

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

Sebelum jQuery 1.8, fungsi donedipanggil successdan faildipanggil error.


3
+1 Sangat bagus, tetapi masih tidak tergila-gila dengan sintaks. Semoga bisa disatukan dalam rilis mendatang.
Yuck

25
Ini harus menjadi jawaban yang diterima. Jawaban yang diterima saat ini adalah "gunakan metode yang berbeda"; jawaban ini mengatakan "inilah cara membuat metode Anda bekerja". Yang terakhir ini biasanya disukai pada SO. Sebenarnya, ini harus dimasukkan dalam dokumentasi $ .post !!!
Mark E. Haase


By the way ada juga responseJSONproperti yang juga sangat berguna dalam hal tipe 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
Menambahkan sedikit penjelasan di sini akan membantu pembaca di masa mendatang.
Eric Brown

13

Cara sederhana adalah dengan mengimplementasikan ajaxError :

Setiap kali permintaan Ajax selesai dengan kesalahan, jQuery memicu acara ajaxError. Setiap dan semua penangan yang telah terdaftar dengan metode .ajaxError () dieksekusi saat ini.

Sebagai contoh:

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

Saya sarankan membaca dokumentasi ajaxError . Itu lebih dari kasus penggunaan sederhana yang ditunjukkan di atas - terutama panggilan baliknya menerima sejumlah parameter:

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

1
+1 - Saya ingin menambahkan bahwa pawang ini mendapatkan beberapa argumen, sehingga Anda dapat menampilkan kesalahan aktual, kode respons, url, dll.
Nick Craver

Perhatikan bahwa pada jQuery 1.8, metode .ajaxError () hanya boleh dilampirkan ke dokumen.
Nanki

0

Anda harus mencatat 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

Anda lampirkan .onerror handler ke objek ajax, mengapa orang bersikeras memposting JQuery untuk tanggapan ketika vanila bekerja lintas platform ...

contoh kilat:

ajax = new XMLHttpRequest();
ajax.open( "POST", "/url/to/handler.php", true );
ajax.onerror = function(){
    alert("Oops! Something went wrong...");
}
ajax.send(someWebFormToken );
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.