How to display error messages and details of error occurred during jQuery AJAX Call

There are multiple ways:

  1. Global ajax error events in jQuery: https://api.jquery.com/ajaxError/
  2. Attach .fail to jqXHR object; example here; https://api.jquery.com/jQuery.get/
  3. You can pass the error key and handler function in the $.ajax function
$.ajax({
  ...
  error: function() {
    // handle error here
  },
  ...
})

with .fail:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});