Avoid jQuery.Post(), use jQuery.ajax()

Well, as you are aware that there are many ways to make an ajax call. If you don't know then do read "How to Make jQuery AJAX calls". Okay, hope you have gone through the article. So 2 very common ways are jQuery.Post() and jQuery.get().jQuery post() is for to make a post request and jQuery get() is to make a get request. That's the only difference between jQuery Post() and jQuery get().

Related Post:

These methods are very popular for ajax call because they are simple to write and easy to remember the syntax as well. But you are making a mistake over here. By using jQuery post()/ jQuery get(), you always trust the response from the server and you believe it is going to be successful all the time. Well, it is certainly not a good idea to trust the response. As there can be n number of reason which may lead to failure of response. Okay, why do I say this? Let's take a look at the signature of jQuery post().

$.post({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

The parameters are,
url (String): The URL of the page to load.
data (Map): Key/value pairs that will be sent to the server.
success (Function): A callback function that is executed if the request succeeds.
dataType: The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

Looking at above parameters, there only a single callback function that will be executed when the request is complete (and only if the response has a successful response code). What if your request fails? There is no error handling. oh... So what should be done?

Well, jQuery provides another method to perform an ajax call which is jQuery.ajax(). This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).

jQuery.ajax(url [, settings] )

There are various settings options available for this method. For complete list visit http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

This method provides callback for success, error and complete. So which means that we can handle error, success and also perform any operation when the ajax request is complete.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  error : error,
  complete : complete,
  dataType: dataType
});

I strongly recommned that it is always better to use jQuery.ajax() over $.post() and $.get(). Having said that, does not mean that $.post() and $.get() are outdatted. If you are using jQuery 1.5 or above, you can still handle the error with $.post() and $.get().

From jQuery official documentation

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.post(), to chain multiple .success(), .complete(), and .error() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

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

    // perform other work here ...

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

So that means that we can still handle the errors using $.post() as well.

But I still recommened $.ajax() method as it gives these options straight away where on the other side, using $.post() one is handling using deferred object.

Feel free to contact me for any help related to jQuery, I will gladly help you.



Responsive Menu
Add more content here...