Description:
Welcome to Jqueryjohn.com.
JSON is nothing but text format that is easy to read
and write. It’s like XML, fast and easy to parse.
JSON is lightweight text interchange format, smaller
than XML.
When the document is ready, use AJAX request
to read and Get the JSON values.
Specify type as ‘POST’ and datatype
as ‘json’.
Success parameter takes JSON data.
success: function
(response) {
var jsonval
= eval('(' + response.d + ')');
for (var i = 0; i < jsonval.length; i++) {
var city =
jsonval[i].City_Name;
}
}
In the below example, I am converting dataset values into JSON.
Example program:
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnReadGetJson').click(function () {
$.ajax({
type: "POST",
url: "ReadXml.aspx/GetJsonData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#divArea").html("<b><u>Cities
retreived from the database are</u></b><br />");
var city = "";
var jsonval = eval('(' +
response.d + ')');
var citylength = jsonval.length;
if (citylength > 0) {
for (var i = 0; i
< citylength; i++) {
var city = jsonval[i].City_Name;
$("#divArea").append('<li>' + city + '<li>');
}
}
},
error: function () {
alert("Failure");
}
});
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="divArea">
<asp:Button ID="btnReadGetJson" runat="server" Text="Read & Get JSON Data" />
<br />
</div>
</form>
</body>
</html>
Code behind:
[System.Web.Services.WebMethod]
public static string
GetJsonData()
{
SqlConnection con = new
SqlConnection("Data
Source=192.169.1.151;Initial Catalog=Example;User
ID=sa;Password=welcome3#;");
con.Open();
SqlCommand cmd = new
SqlCommand("select
City_Name from City", con);
SqlDataAdapter da = new
SqlDataAdapter(cmd);
DataTable ds = new
DataTable();
da.Fill(ds);
string obj = GetJson(ds);
return obj;
}
public static
string GetJson(DataTable
dt)
{
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string,
object>> rows = new
List<Dictionary<string, object>>();
Dictionary<string, object>
row = null;
foreach (DataRow dr in
dt.Rows)
{
row = new
Dictionary<string,
object>();
foreach
(DataColumn col in
dt.Columns)
{
row.Add(col.ColumnName.Trim(),
dr[col]);
}
rows.Add(row);
}
return
serializer.Serialize(rows);
}
The above program reads the JSON data and
updates with the page without postback via JQuery AJAX.
Read Json data using jquery, jquery to read Json data, how to read and
parse Json data, load Json data using Jquery Ajax, retrieve data from Json
using jquery