Wednesday, November 14, 2012

jQuery getJSON Example

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc  to make an Ajax call. In this post we shall see on how to use the getJSON () method to make an Ajax call.

The following example receives a JSON format data from the server and displays the data in a DIV tag in the browser.

.aspx Page (Client Side)
<html xmlns="" >
<head runat="server">
    <title>jQuery Ajax getJSON</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
        $(document).ready(function() {
            // Get JSON Response data from the Server
            $('#btnGetJSON').click(function(event) {
                var jsonContent = "";
                var jsonObj;
                $.getJSON("AjaxData.json", function(result) {
                    for (var x = 0; x < result.length; x++) {
                        jsonContent += result[x].Name;
                        jsonContent += "-";
                        jsonContent += result[x].Age;
                        jsonContent += "</br>";
    <form id="frmAjax" runat="server">
    <table border="1">
            <tr valign="middle">
                        Text="Get JSON" />
                <td align="center">
                    <br /><div id="divJSON"></div> 

.AjaxData.json(Server Side)

[{"Name": "John", "Age": "34"}, {"Name": "David", "Age":"24"}]

Related Post
jQuery getJSON Method
jQuery getJSON Example
jQuery getScript Method
jQuery getScript Example

Search Flipkart Products: