How to do Ajax Requests with jQuery
jQuery includes various methods for doing Ajax calls. Here's an introduction.
Here I show you some common techniques for doing Ajax calls with jQuery.
load() method is the easiest way to do an Ajax call. It allows you to load data from the server and place the returned HTML into the matched element.
To use the
load() method, pass the file name in as a parameter. Like this:
Here it is in action, loading latestData.html :
If no element is matched by the selector the Ajax request will not be sent. So in our example, if there was no element with an ID of
#data, the request wouldn't be sent and clicking the button wouldn't change anything on the page.
Using a Callback Function
You can provide a "complete" callback function that only runs after the HTML insertion has succeeded. For example, you could use this callback function to display a "success" message to the user.
Here it is in action:
Loading Page Fragments
You can also load a portion of the file rather than the whole thing. For example, you could tell jQuery to only load an element with a particular ID. To do this, simply provide the ID with the file parameter (separated by a space).
Here's some sample code:
Here it is in action:
And for reference, here's the HTML code that makes up our external file, latestData.html :
One popular use case of Ajax is to retrieve data from a remote JSON file.
jQuery has the
getJSON() method specifically for use with JSON files.
Here's how it works.
Basically, you use
getJSON() to retrieve the JSON data. Then you pass the data to the
success callback function to process the data however you like.
Here's an example where we use
getJSON() to retrieve data from artists.txt , loop through its contents adding HTML tags, then output the result to the web page.
This example is taken from JSON with HTTP using jQuery (from my JSON tutorial).
jQuery has a number of methods for performing Ajax requests (full list in the jQuery documentation) but they all use the
ajax() method behind the scenes.
One of the benefits of other methods such as
load() is that they provide a simpler way of achieving a desired outcome. In most cases, these methods are all you need.
ajax() method has a lot more options for customizing your Ajax requests. For example, you can provide authentication details with the
password options. You can also change requests to be synchronous by using
asynchronous: false. You can use the
data option to send data to the server, and you can specify the data type that you're expecting back from the server (e.g.
Here's an example of loading the same file from the previous example, except this time using the