Somehow I got a lot of questions about jQuery and Ajax, which is quite easy to understand.
I’ll show you how to create an ajax call using jQuery and update the page without reloading.
I assume you have knowledge of HTML, CSS and basic HTTP techniques.
First we’re going to create our HTML document.
I’ll show you how to create an ajax call using jQuery and update the page without reloading.
I assume you have knowledge of HTML, CSS and basic HTTP techniques.
First we’re going to create our HTML document.
Our HTML5 document
<!doctype html><html> <head> <meta charset="utf-8" /> <title>My jQuery Ajax test</title> <style type="text/css"> #mybox { width: 300px; height: 250px; border: 1px solid #999; } </style> </head> <body> The following div will be updated after the call:<br /> <div id="mybox"> </div> <input type="button" value="Update" /> </body></html>
As you can see it’s a simple HTML5 document with a little style, a DIV element and a button.
See http://docs.jquery.com/Downloading_jQuery for more ways to include jQuery.
Add the following between the tags of our HTML5 document:
jQuery
You may have noticed jQuery isn’t included yet. You can include it through a CDN (Content Delivery Network) or host it yourself.See http://docs.jquery.com/Downloading_jQuery for more ways to include jQuery.
Add the following between the tags of our HTML5 document:
At the time of this writing we use jQuery 1.7.2 hosted at the Google API’s.
That’s it! Lets break it down a little:
Here you’re creating a function called “myCall” which will make the actual request to a file on your server called “ajax.php”.
We’re using GET HTTP-request to send our data to the server.
The expected type of the return code is HTML.
When the request is done fetching our data from ajax.php it will update the DIV “#msgbox” with the output of ajax.php
If the request fails it will show an alert message with the failure message.
To make the actual call add this to the input button element:
When you press the button it will execute your function “myCall()” we’ve created earlier.
Save the above code as “ajax.php” and make sure you upload it in the same spot as the HTML document.
You should now have 2 files in the same folder, one is the HTML document:
Your Ajax call
Create the following code between the and tags, for example below the jQuery source.<script> function myCall() { var request = $.ajax({ url: "ajax.php", type: "GET", dataType: "html" }); request.done(function(msg) { $("#mybox").html(msg); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); }</script>function myCall() { var request = $.ajax({ url: "ajax.php", type: "GET", dataType: "html" });We’re using GET HTTP-request to send our data to the server.
The expected type of the return code is HTML.
request.done(function(msg) { $("#mybox").html(msg); }); |
If the request fails it will show an alert message with the failure message.
To make the actual call add this to the input button element:
<input type="button" value="Update" onclick="myCall();" /> |
Server-side script
In this tutorial we’ll create a PHP file that will act as the ajax callable file. You could use any server-side scripting language you prefer.<?phpecho '<p>Hi I am some random ' . rand() .' output from the server.</p>'; |
You should now have 2 files in the same folder, one is the HTML document:
<!doctype html><html> <head> <meta charset="utf-8" /> <title>My jQuery Ajax test</title> <style type="text/css"> #mybox { width: 300px; height: 250px; border: 1px solid #999; } </style> <script> function myCall() { var request = $.ajax({ url: "ajax.php", type: "GET", dataType: "html" }); request.done(function(msg) { $("#mybox").html(msg); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); } </script> </head> <body> The following div will be updated after the call:<br /> <div id="mybox"> </div> <input type="button" value="Update" onclick="myCall()" /> </body></html>
And the PHP file “ajax.php”:
Refresh your browser and press the button a few times. You’ll see the div will update itself with the output of the ajax file.
<?php echo '<p>Hi I am some random ' . rand() .' output from the server.</p>'; |
No comments:
Post a Comment