Using jQuery AJAX to load static or dynamic data is very easy. jQuery provides the load() method to accomplish this task efficiently.
Syntax
Here is the simple syntax for the load() method:
[selector].load(URL, [data], [callback]);
|
Here is the description of all the parameters:
- URL: The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
- data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
- callback: A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and the second parameter is the status code.
Example
Consider the following HTML file with a small jQuery code:
<html>
<head>
<title>jQuery Load Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
|
Here, load() initiates an Ajax request to the specified URL /jquery/result.html. After loading this file, all the content will be populated inside the <div> tagged with the ID stage.
Comments
Post a Comment