Multiple Ajax Calls using jQuery

Question

I am new to jQuery and I need to retrieve the status code for multiple ajax calls. For each ajax calls, I need to display either of the two alert pop-up messages: 1) Success (If status code is 200) 2) Failure (For anything other than 200 status code)

I am able to display the success alert pop-up but not sure how/where to display the Failure message:

$(document).ready(function() {
          $("#btnSubmit").click(function(){
            for (var i = 8078; i < 8085; i++) {
              jQuery.ajax({
                'url': 'http://localhost:' + i + '/test/',
                dataType : 'jsonp',
                crossDomain:true,
                async:false,
                statusCode: {
                  200: function() {
                    alert('Success');
                  }
                }
              });
            };
          });
      });

Please let me know how to handle the failure scenario. Also, I am not sure whether I used the For loop properly or not; please guide.

Answer 1

You have property called error in $.ajax . You can try it as below:

$("#btnSubmit").click(function(){
     for (var i = 8078; i < 8085; i++) {
         jQuery.ajax({
             'url': 'http://localhost:' + i + '/test/',
              dataType : 'jsonp',
              crossDomain:true,
              async:false,
              statusCode: {
                  200: function() {
                    alert('Success');
              },
              error:function(data){
                    alert('Failed');
              },
          });
     }
});

Similarly you have success to check success response

UPDATE

You can try one more method to get it done as below:

for (var i = 8078; i < 8085; i++) {
    jQuery.ajax({
           'url': 'http://localhost:' + i + '/test/',
            dataType : 'jsonp',
            crossDomain:true,
            async:false,
    })
    .done( function( data ) {
           // Handles successful responses only
    })
    .fail( function( reason ) {
           // Handles errors only
           console.debug( reason );
    })
    .always( function( data, textStatus, response ) {
           // If you want to manually separate stuff
           // response becomes errorThrown/reason OR jqXHR in case of success
    })
    .then( function( data, textStatus, response ) {
           // In case your working with a deferred.promise, use this method
           // Again, you'll have to manually separates success/error
    });
}

Answer 2

I found this this link which states that there's is two options to manage errors and successes. You can do something like that:

      jQuery.ajax({
        'url': 'http://localhost:' + i + '/test/',
        dataType : 'jsonp',
        crossDomain:true,
        async:false,
        statusCode: {
          200: function() {
            alert('Success');
          }
        },
        error: function(xhr,status,error) {
           alert('error!');
        }
      });

Answer 3

async:false,
success: function(data,textStatus,xhr){
        // handle success
},
error: function(xhr,textStatus,error){
       // handle error
},..