Archive for category: AJAX

jQuery Ajax Post

Categories: AJAX, javascript, jQuery

jQuery provides a quick, robust and easy way to request data from the server without a page reload through AJAX. In this short article we’ll look at loading data from the server using a HTTP Post Request.

jQuery $.post function

There is a shorthand AJAX post function with the following signature:

$.post({
  url: 'myTargetURL.php',
  data: data,
  success: success function(data, textStatus, jqXHR),
  dataType: dataType
});

jQuery $.ajax Post Function

I prefer to use the default .ajax function for ease of use and maintainability.

$.ajax({
type: 'POST',
url: 'myTargetURL.php',
data: data,
success: success function(data, textStatus, jqXHR),
complete: function(),
dataType: dataType
});
You’ll notice that they both accomplish the same thing, however, the $.ajax function has more flexibility. Just a personal preference.

jQuery AJAX Post Parameters

Here is the rundown on pass parameter:
type – HTTP Request Type. In this case ‘POST‘, but could be ‘GET‘ as well.
url – A string containing the URL to which the request is sent. Eg: HTTP://www.Yourdomain.com/YourAjaxScript.php

data – A map or string that is sent to the server with the request.

success(data, textStatus, jqXHR) – A callback function that is executed if the request succeeds.

complete() – A callback function that is executed when everything is complete.

dataType – The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

jQuery Ajax Error Handling

The jQuery $.ajax function has a very robust error handling system. You can read more about it’s implementation in the jQuery Ajax Error Handling Function post.

jQuery Ajax Post Example

$.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        // callback handler that will be called on success
        success: function(response, textStatus, jqXHR){
            // log a message to the console
            console.log("It worked!");
        },
        // callback handler that will be called on completion
        // which means, either on success or error
        complete: function(){
            // enable the inputs
            $inputs.removeAttr("disabled");
        }
    });

jQuery .Ajax Error Handling Function

Categories: AJAX, jQuery

jQuery Ajax Request – Background

The jQuery library provided easy access to AJAX requests with the following functions $.get, $.post, $.ajax:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    //do something on success
  }
});

The jQuery ajax error function hook is part of the callback function queues. When the callback is invoked it receives the jqXHR, a string indicating the error type, and an exception object if applicable. There are several built in error strings provided by the exception option they include “abort“, “timeout“, “No Transport“, “parser error“. We also have access to server errors that are returned. In this implementation we want to catch the following.

  1. HTTP Status Code 404 Error – ajax file not found error
  2. HTTP Status Code 500 Error – ajax internal system error
  3. AJAX JSON Parse Errors
  4. jQuery AJAX Timeout Errors
  5. jQuery AJAX Abort Errors
  6. Browser/Connectivity Errors
  7. AJAX no transport error
  8. Other Unknown Errors

jQuery .ajaxSetup() Function

It is possible to set default values for all jQuery AJAX requests using the JQuery .ajaxSetup()function. The function is used to set default key/value pairs for all future AJAX requests. Looks like this:

$.ajaxSetup({
     key: 'value'
});

jQuery Ajax Error Function

Let’s start building the function the will return the Ajax error. It will be a series of if else statements to text the chain of possible errors. We’ll test in a specific order and set an alert for each of the caught errors. We’ll also set the new function to the default error handling function with $.ajaxSetup().

Share the love!
$(function() {
	$.ajaxSetup({
		error: function(jqXHR, exception) {
			if (jqXHR.status === 0) {
				alert('Not connect.\n Verify Network.');
			} else if (jqXHR.status == 404) {
				alert('Requested page not found. [404]');
			} else if (jqXHR.status == 500) {
				alert('Internal Server Error [500].');
			} else if (exception === 'parsererror') {
				alert('Requested JSON parse failed.');
			} else if (exception === 'timeout') {
				alert('Time out error.');
			} else if (exception === 'abort') {
				alert('Ajax request aborted.');
			} else {
				alert('Uncaught Error.\n' + jqXHR.responseText);
			}
		}
	});
});

Once the default error handling action is set, you can leverage it by calling the existing jQuery ajax functions.

Ajax Error handling Examples:

// jQuery AJAX Error Handler
$.ajax({
  url: "test.php"
});

or
// jQuery AJAX Get Error Handler
$.get("test.php");

or
// jQuery AJAX post Error Handler
$.post("test.php");
© 2012 - www.UnseenRevolution.com - Unseen Revolution LLC. 333 NW 4th Ave. Portland, OR 97209
5093c67c4bc68
By
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar