Back when I was first starting out with JavaScript and JQuery, I was a bit frustrated by the lack of simple introductory JQuery Ajax examples. Most of the tutorials that I found back then were needlessly complicated or incredibly specific. In most cases, they used features that a beginner developer doesn’t need to know about (yet).
Firstly, you need to understand that an Ajax request is just like any request. The only difference is that the user doesn’t have to reload the page. For example: Instead of sending a POST request with a form, you could send off a POST request via Ajax. This would allow the user to submit the form without having to navigate to another page.
OK, let’s get started. This is a basic JQuery Ajax GET request:
$.ajax({
type: "GET",
url: 'test.php',
success: function(data){
alert(data);
}
});
In the code above, there are three parameters / options:
- type: This is type of HTTP request that you want to perform. In this example, I am sending a GET request. If you want to send a POST request instead, simply change “GET” to “POST”.
- url: This is the URL that we want to send an Ajax request to. In this case, it is “test.php”. You can change this to “example.php” or “folder/example.php” if you want to. Remember that the URL is relative to the page that the user is on.
- success: This is the function that gets called if the request has been successful. Note that this function has a parameter called data, which will contain the output from test.php. i.e. If test.php prints out the string “OK”, then this data variable will contain the string “OK”.
It is important that you play around with the code above. i.e. Change “GET” to “POST” and modify the URL. Remember: You should use the built-in developer tools in Firefox / Chrome to debug your Ajax requests. Typically, these requests will show up in the networks tab under XHR. Without these developer tools, it can be incredibly difficult to figure out what is actually going on. These developer tools will allow you to visualize the request. They will also let you know if a request is failing.
What if we want to add GET parameters (query string parameters) to our Ajax request?
$.ajax({
type: "GET",
url: 'test.php',
data: {name: 'Wayne'},
success: function(data){
alert(data);
}
});
As you can see, I’ve added a new parameter called “data”. This is a JavaScript object containing the data that we want to send in the request. In this case, because we are sending a GET request, these parameters will be automatically appended to the query string like so: test.php?name=Wayne
If I want to add multiple GET variables, I can do it like so:
$.ajax({
type: "GET",
url: 'test.php',
data: {name: 'Wayne', age: 27, country: 'Ireland'},
success: function(data){
alert(data);
}
});
This will send a GET request to: test.php?name=Wayne&age=27&country=Ireland
Pretty simple, right?
As always, you should play around with the code a bit, just to get your head around it. Try adding and removing parameters, just to see if you fully understand how to send data via a JQuery Ajax request.
OK, but what if we want to send a POST request to a file called submission.php?
$.ajax({
type: "POST",
url: 'submission.php',
data: {name: 'Wayne', age: 27},
success: function(data){
alert(data);
}
});
As you can see, I’ve changed the type from “GET” to “POST” and I have changed the url to submission.php. In this particular example, both name and age will be sent as POST variables (because we set the request to “POST”). This means that they can be accessed in submission.php like so:
$name = $_POST['name']; $age = $_POST['age'];
If this was a GET request, then the variables would have been sent via the query string, which would have made them accessible like so:
$name = $_GET['name']; $age = $_GET['age'];
As you can see, these variables are accessed the same way that they are accessed in a regular request.
The last piece of the puzzle is the success function, as this is the function that gets called if the Ajax request is completed successfully. In the examples above, I am simply alerting the returned data. However, in most situations, you will be using the function to show UI messages to the user. For example, if the user submits the form via Ajax, then you would use this success function to check the response and provide them with confirmation that the form was submitted successfully.
Hopefully, this article taught you the basics!