如何在jquery中处理AJAX中的错误

Question

How can I handle errors in AJAX?

In my code, the else condition containing console.log is not executed even when the departments.json file is not loaded. I checked it by deleting the departments.json file from where it is loaded into the code.

My code is:

$.getJSON("departments.json?" + new Date().getTime(), {}, function(departments, status, xhr) {
    if (xhr.status == 200) {   
        var numericDepts = [];
        var nonNumericDepts = [];

        for(dept in departments) {   
            $("#kss-spinner").css({'display':'none'});
            if (isNaN(departments[dept].depNo)) {
                if (isNaN(parseInt(departments[dept].depNo,10)))
                    nonNumericDepts[nonNumericDepts.length] = departments[dept];
                else
                    numericDepts[numericDepts.length] = departments[dept];
            }
            else
                numericDepts[numericDepts.length] = departments[dept];
        }

        numericDepts.sort(cmp_dept);
        nonNumericDepts.sort(function(dept1,dept2) {
            return dept1.depNo.toLowerCase() - dept2.depNo.toLowerCase();
        });
        departments.sort(cmp_dept);
        var k = 0;

        $.each(numericDepts.concat(nonNumericDepts), function() {
            if (k % 2 == 0) {
                $('<p class="odd" onClick="selectTag(this,\'' + this.id + '\', 1)">' + this.depNo + '</p>').appendTo($(".scroller", $("#br1")));
            }
            else {
                $('<p class="even" onClick="selectTag(this,\'' + this.id + '\', 1)">' + this.depNo + '</p>').appendTo($(".scroller", $("#br1")));
            }
            k++;
        });
        $("#kss-spinner").css({'display':'none'});
    }
    else {  
        console.log(xhr.status);
        console.log(xhr.response);
        console.log(xhr.responseText)
        console.log(xhr.statusText);
        console.log('json not loaded');
    }
});

Answer 1

You could just use the generic ajax() function:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: successCallback,
  error: errorCallback
});

Answer 2

You will need to use the fail() method in order to accomplish that.

Example:

$.get("test.php")
  .done(function(){ alert("$.get succeeded"); })
  .fail(function(){ alert("$.get failed!"); });

Answer 3

if you need a generic error handler use

  $.ajaxSetup({ 
            error: function(xhr, status, error) {
            // your handling code goes here
            }
            });

Answer 4

JQuery's getJSON function is an abstraction over the regular .ajax() method - but it excludes the error callback.

Basically, the function you define is only called if the call is successful (that's why it never gets to the else part).

To handle errors, set an error handler before like this:

$.ajaxError(function(event, jqXHR, ajaxSettings, thrownError) { alert("error");});

Whenever an AJAX request completes with an error, the function will be called.

You can also append the .error at the end of your getJSON call:

$.getJSON("example.json", function() {
    (...)
 }).error(function() { (...) });

Answer 5

The $.getJSON() function is just a special purpose version of the more general .ajax() function.

.ajax() function will give you the extra functionality you desire (such as an error function). You can read more documentation here http://api.jquery.com/jQuery.ajax/

$.ajax({
  url: "departments.json?" + new Date().getTime(),
  dataType: 'json',
  success: function(departments){
      var numericDepts = [];
      var nonNumericDepts = [];
      for(dept in departments)
      {   
        $("#kss-spinner").css({'display':'none'});
        if(isNaN(departments[dept].depNo))
        {
          if(isNaN(parseInt(departments[dept].depNo,10)))
            nonNumericDepts[nonNumericDepts.length]=departments[dept];
          else
            numericDepts[numericDepts.length]=departments[dept];
        }
        else
          numericDepts[numericDepts.length]=departments[dept];
      }
      numericDepts.sort(cmp_dept);
      nonNumericDepts.sort(function(dept1,dept2) {
        return dept1.depNo.toLowerCase() - dept2.depNo.toLowerCase();
      });
      departments.sort(cmp_dept);
      var k=0;
      $.each(numericDepts.concat(nonNumericDepts),function(){
        if(k%2==0){
          $('<p class="odd" onClick="selectTag(this,\''+this.id+'\',1)">'+this.depNo+'</p>').appendTo($(".scroller",$("#br1")));
        } else {
          $('<p class="even" onClick="selectTag(this,\''+this.id+'\',1)">'+this.depNo+'</p>').appendTo($(".scroller",$("#br1")));
        }
        k++;
      });
      $("#kss-spinner").css({'display':'none'});
  },
  error: function(xhr, textStatus, errorThrown) {  
    console.log(xhr.status);
    console.log(xhr.response);
    console.log(xhr.responseText)
    console.log(xhr.statusText);
    console.log('json not loaded');
  }
});​