Handling JSON Responses with jQuery's getJSON()

There are situations where a server returns a JSON string in response to your request. The jQuery utility function getJSON() parses the returned JSON string and makes it available to a callback function, which is the first parameter of the function.

Syntax

Here is the simple syntax for the 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 code:

<html>
<head>
<title>jQuery getJSON 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){
        $.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.json file:</p>
<div id="stage" style="background-color:blue;">
    STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

Here, the jQuery utility method getJSON() initiates an Ajax request to the specified URL /jquery/result.json. After loading this file, all the content is passed to the callback function, which finally populates the content inside the <div> tagged with ID stage.

Assuming our /jquery/result.json file contains the following JSON-formatted content:

{
"name": "Zara Ali",
"age": "67",
"sex": "female"
}

When you click the button, the result.json file gets loaded, and the data is displayed inside the stage div.

Technical Notes

Search This Blog