There would be a situation when server would return JSON string against your request. JQuery utility function
getJSON()
parses the returned JSON string and makes the resulting string
available to the callback function as first parameter to take further
action.
Syntax:
Here is the simple syntax for
getJSON() method:
[selector].getJSON( URL, [data], [callback] );
|
Here is the description of all the parameters:
- URL: The URL of the server-side resource contacted via the GET method.
- data: An object whose properties serve as the name/value
pairs used to construct a query string to be appended to the URL, or a
preformatted and encoded query string.
- callback: A function invoked when the request completes.
The data value resulting from digesting the response body as a JSON
string is passed as the first parameter to this callback, and the status
as the second.
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){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</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 JQuery utility method
getJSON() initiates an Ajax request to the specified URL
/jquery/result.json
file. After loading this file, all the content would be passed to the
callback function which finally would be populated inside <div>
tagged with ID
stage. Assuming, our /jquery/result.json file has following json formatted content:
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
|
When you click the given button, then result.json file gets loaded.
Comments
Post a Comment