Load data from the server using an AJAX jQuery GET request

How to change data of a div element using an AJAX jQuery GET request. The jQuery get() method is used to perform an AJAX HTTP GET request.

jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

url
A string containing the URL to which the request is sent.

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.

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

From jQuery 1.5 it also allows you to chain multiple methods .success, .error and .complete

$.get("data.php", function() {
	// replace HTML in div
	$("#id-div").html(data);
})
.success(function() { alert("success"); })
.error(function() { alert("error..."); })
.complete(function() { alert("complete"); });

Send some additional data along while requesting data.php

$.get("data.php", { email: "email@email.com", date: "2011-01-01" }, function() {
	alert(data);
});
 
// send data as array
$.get("data.php", { 'cars[]': ["bmw", "saab"]} ), function() {
	alert(data);
});

JSON example

data.php

$.get("data.php", function(data){
	alert(data.email);
}, "json");

Ajax Form Pro

Create professional secure forms with captcha, realtime validation and php backend. Read more