With jQuery we have a comprehensive range of tools for making light work of AJAX. Before we get started you may like to read up on JSON. Mentioned in that post is the idea that the likes $.getJSON(), $.get() and $.post() covered here are global functions / methods and therefore you do not attach them to a selector as we often do with other jQuery methods.

Another quick note before we dive into some examples, $.getJSON(), $.get() and $.post() are all shorthand variants of the grandaddy jQuery AJAX method called er $.ajax. Therefore if you can't get the data you want using one of these chaps try the $.ajax method which has a wealth of parameters to choose from.

$.getJSON()

As the name implies this will load JSON using a HTTP GET. The syntax for $.getJSON is as follows:

$.getJSON(url, [data], [callback]);

$.getJSON('dickens.json', function(myData) {
    console.dir(myData);
});

See a working demo.

jQuery $.get()

Here again a HTTP GET is used to call data but this time it does not necessarily need to be JSON that is requested, so it can be other supported data types such as XML. The syntax for $.get is as follows:

$.get(url, [data], [callback], [data type]);

Other data types could be JSON, SCRIPT or HTML.

In this demo we'll send a GET request through to this simple PHP page:

switch($_GET['like']){
	case 'pies' :
	$resp = 'fattening';
	break;
	case 'apples' :
	$resp = 'sweetening';
	break;
	case 'lettuce' :
	$resp = 'boring';
	break;
}
echo $resp;

Depending on the value of $_GET['like'] the PHP will simply echo back a value.

Our jQuery $.get request needs to send a value through to the PHP. To do this it needs to take the form of a name / value pair ie like=pies. We can do this by simply creating a Javascript object ie:

var myVars = {'like':'apples'};

We can then use this variable in the $.get request as follows:

$.get('response-html.php', myVars, function(myData) {
	$('.resp').html(myData);
});

The callback function then takes the value of 'myData' which should be the value returned from the PHP.

Here is a working demo.

Warning: As mentioned above $.get is a global method. Confusingly there is also a DOM element method called .get() that is used for DOM selection.

jQuery $.post()

The $.post option works in the same way as $.get but data is send via POST. The syntax for $.post is as follows:

$.post(url, [data], [callback], [datatype]);

To demonstrate $.post we will send a request to a similar PHP page as that used in the $.get example but this time the PHP will return JSON. The PHP page looks as follows:

switch($_POST['like']){
	case 'pies' :
	$resp = 'fattening';
	break;
	case 'apples' :
	$resp = 'sweetening';
	break;
	case 'lettuce' :
	$resp = 'boring';
	break;
}
$myAr = array('resp'=>$resp);
echo json_encode($myAr);

There are a couple of subtle differences with this new PHP page. As we are posting data it obviously uses $_POST but notice how the chosen '$resp' variable is stored in an array and then run through json_encode before been output with echo. The handy PHP method json_encode ensures that the PHP returns a JSON object that our jQuery will understand.

On the jQuery side of things the request would appear as follows:

var myVars = {'like':'apples'};
$.post('response-json.php', myVars, function(myData) {
	$('.resp').html(myData.resp);
}, 'json');
});

Notice that to output the value from the returned JSON we are using the . (dot) notation. In this example we have also explicitly indicated using the third parameter of $.post that we expect the data type returned to be JSON.

Here is a working demo.

serialize()

Working with AJAX usually means working with HTML forms. The jQuery method serialize() can be targeted at a HTML form element and it will create a URL encoded set of name/value pairs which is great for then sending through with your AJAX request.

In this example we have a HTML form:

<form>
<select name="like">
	<option value="">Please Pick:</option>
    <option value="pies">pies</option>
	<option value="apples">apples</option>
	<option value="lettuce">lettuce</option>
</select>
</form>

When an option is picked the jQuery on event is triggered:

$('select').on('change', function(){
   console.info(this);
}

The results of the console would be something like like=pies or like=apples. We can then send this serialized data through to the AJAX as follows:

$('select').on('change', function(){
   var myVars = $(this).serialize();
      $.get('response-html.php', myVars, function(myData) {
		$('#picked').html($('select').val());
		$('.resp').html(myData);
   });
});

Here is a working demo.

This example only has one name / value pair to encode but the neat thing about serialize() is that you could point it at the form element in a page and have it encode every name / value pair in the form ie:

$('form').on('submit', function(ev){
     ev.preventDefault();
     var myVars = $(this).serialize();
     console.info(myVars);
});

Here is a basic demo.

Tip: The ev object sent to the callback function is used with jQuery's ev.preventDefault(ev) to stop the form from behaving natively - ie stops it submitting and refreshing the page. With AJAX as we send data 'silently' in the background we often want form elements but don't want them submitted in the 'traditional' fashion.

Leave a Comment