jQuery is a JavaScript library that lets you easily create highly interactive, responsive and dynamic web pages. One of the greatest advantages of using jQuery is the ability to make Ajax calls with it. In this tutorial we’re going to learn how to make Ajax calls with jQuery.
With Ajax you can update content of various sections of your web page without having to manually refresh the web page using your browser button. You can even submit forms and show the result without going to the next page. In most cases, an Ajax call requires:
- An event that triggers the Ajax call
- A JavaScript function (in this case a jQuery function) that makes the Ajax call
- An external file that responds to the call
- A web page element that shows the result of the Ajax call
Let’s first create the initial web page that makes a simple Ajax call to print a string.
<head>
<title>Making Ajax calls with jQuery</title>
<script language=”javascript” src=”jquery-1.3.2.min.js”></script>
<script language=”javascript”>
function click_function()
{
$(‘#show_stuff’).load(‘file-with-action.php’);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”click this to make Ajax call” onclick=”click_function();”>
</form>
<div id=”show_stuff”></div>
</body>
</html>
As you can see, you need to include the jQuery file in order to use it. Then we’ve simply created a button that you need to click in order to print “Hello!” on the screen. For the onclick function we’ve defined a click_function. The onclick function appears like this:
function click_function()
{
$(‘#show_stuff’).load(‘file-with-action.php’);
}
</script>
jQuery uses the $ sign to represent the various functions it allows you to execute. This function simply puts the output of “file-with-action.php” in the “show_stuff” div.
file-with-action.php doesn’t have to be this simple. It can execute the most complicated algorithm and print the result accordingly.
The real fun of making Ajax calls begins with sending variables. Let’s add a name field to our initial form:
<head>
<title>Making Ajax calls with jQuery</title>
<script language=”javascript” src=”jquery-1.3.2.min.js”></script>
<script language=”javascript”>
function click_function()
{
$.get(“file-with-action.php”, {yourname: $(“#yourname”).val()}, function(responseText){$(“#show_stuff”).html(responseText)});
}
</script>
</head>
<body>
<form>
<label>Enter your name:</label> <input type=”text” name=”yourname” id=”yourname” /><br /><br />
<input type=”button” value=”click this to make Ajax call” onclick=”click_function();”>
</form>
<div id=”show_stuff”></div>
</body>
</html>
This time along with making an Ajax call we’re also sending a variable. file-with-action.php now looks like this:
echo “Hello ” . $_GET['yourname'] . “!”;
?>
You can similarly send your variables using POST instead of GET.
