To dynamically load content in a website with Ajax, you have three basic options:
This is the simplest method for loading dynamic content in a website. Simply call the element you want to display the webpage inside, like a [div] tag, and then tell which page you want to load:
This will load the body content of pagetoload.html into #myDynamicDiv
- $('#MyDynamicDiv').load('mypages/pagetoload.html');
There a few extra options with this function, such as specific parts of a page to load and using variables. Read more about these advanced options. Or continue to the $.get() and $.post() functions that focus more on the result of the webpage loaded.
Both $.get() and $.post() are advanced functions for loading pages when your goal may not be to display the page (though you can if you want). In it's simplest use, it merely loads a page behind-the-scenes, and doesn't tell you or the user anything. This may be useful if you want a PHP page to quietly save information to a database:
This will process pagetoload.html, and do nothing else
- $.get('pagetoload.php');
In the above example, we've used $.get(), but we could also use $.post(). The difference is that $.get() will send data that PHP would retrieve with $_GET and $.post() would send data to be retrieved by $_POST. This is just like when a [form] sends data to another page, you would set the action equal to "GET" or "POST".
All of these will process pagetoload.html, and pass the variables "item" and "location"
- $.get('pagetoload.php', 'item=519&location=currentpage.html'); // For $.get() only
- $.get('pagetoload.php', {item: '519', location: 'currentpage.php'});
- $.get('pagetoload.php', {item: itemID, location: currentPage});
Again, in the above example, we've used $.get(), but we could also use $.post(). There are also other ways to pass data, and to perform functions after the page is processed, including loading the requested page into the current page just like .load() does. Read more about these advanced paramaters or skip directly to the $.ajax() function, which allows everything the $.get() and $.post() functions do, and more.
The $.ajax() function allows expert settings for complete control over your dynamic content. The single parameter for this function is an array with 20+ key/values that can be set. Fortunately, all of them are optional. So, in it's simplest form, you can simply write:
This will process the current page, and do nothing else
- $.ajax()
This doesn't seem to be very useful, but thats were the array parameter comes in, to customize your ajax request just like you want it. To start with, lets replicate the basic $.get() example using $.ajax(), like this:
This will process pagetoload.php, and pass the variables "item" and "location"
- $.ajax({
- url: 'pagetoload.php',
- data: {item: itemID, location: currentPage}
// data: 'item='+itemID+'&location='+currentPage // Alternate syntax- });
Notice the different syntax available for data. All values for the $.ajax() function keys you will be introduced to can use hard-coded data or variables. You may also notice that this code is longer than the .load() code, but still fails to notify us or the user of a change, and certainly doesn't load content into the current page. That's because we haven't provided a success value. The next section will show us how to provide a success value, and load content into the current page.
A major feature of $.ajax() function is the "callback function". For a good introduction to the callback function, please read our intermediate tutorial on advanced uses of $.get() and $.post(). If you already understand callback functions, then let's get right to it. Your callback function should be typed as the value of the success key:
This will process pagetoload.html, and then alert us the page was successfully loaded
- $.ajax({
- url: 'pagetoload.php',
- success: function(){
- alert('The page was loaded');
- }
- });
All ajax functions discussed have been able to load content into the webpage. The function $.ajax() is no different. Simply pass the data parameter to the callback function, and use the data parameter within the function.
This will process pagetoload.html, load the content, and alert us the page was loaded
- $.ajax({
- url: 'pagetoload.php',
- success: function(data){
- $('#myDynamicDiv').html(data); // Load data into a [div] as HTML
- alert('The page was loaded!');
- }
- });
Though the simpler functions we've already mentioned will get this job done more easily, there are situations where only $.ajax() can complete the task. To really understand the power of the function, one would need to explore all 20+ key/value pairs (i.e. options for the function). In the final section we'll a mention a few that might be useful.
This will process pagetoload.html non-cache, send variables as GET type, and HTTP access authentication
- $.ajax({
- url: 'pagetoload.php',
- data: {item: '519'},
- type: 'POST' // Default value 'GET' sends data via GET
- cache: true // Alternate value false forces browser not to send cached page
- async: true // Alternate value false pauses current page until action is complete
- username: userVariable // Optional value for HTTP authentication
- password: passVariable // Optional value for HTTP authentication
- });
There are other ajax-related functions not covered by this tutorial. And above was only a brief sampling of all the parameters the $.ajax() function can accept. For more information, please refer to the jQuery API.
Let's get into contact so you learn more about us and we can create solutions for you!