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="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Ajax getJSON</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            // Get JSON Response data from the Server
            $('#btnGetJSON').click(function(event) {
                event.preventDefault();
                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>";
                    }
                    $("#divJSON").html(jsonContent);
                }
                );
            });
        });
    </script>                 
</head>
<body>
    <form id="frmAjax" runat="server">
    <table border="1">
        <tr>
            <td><b>Action</b></td>
            <td><b>Response</b></td>
        </tr>
            <tr valign="middle">
                <td>
                    <asp:Button
                        ID="btnGetJSON"
                        runat="server"
                        Text="Get JSON" />
                </td>
                <td align="center">
                    <br /><div id="divJSON"></div> 
                </td>
            </tr>
           
    </table>
    </form>
</body>
</html>

.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:
Flipkart.com