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)
Related Post
jQuery getJSON Method
jQuery getJSON Example
jQuery getScript Method
jQuery getScript Example
The following example receives a JSON format data from the server and displays the data in a DIV tag in the browser.
<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"}]
[{"Name": "John", "Age": "34"}, {"Name": "David", "Age":"24"}]
Related Post
jQuery getJSON Method
jQuery getJSON Example
jQuery getScript Method
jQuery getScript Example
No comments:
Post a Comment