This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides
load() method to do the job:
Syntax:
Here is the simple syntax for
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 recieved from the
server and second parameter is the status code.
Example:
Consider the following HTML file with a small JQuery coding:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="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 file. After loading this file, all the content would be populated inside <div> tagged with ID
stage.
Comments
Post a Comment