Jquery解析json数据详解
最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。
首先简单介绍一下getJson方法
Jquery.getJson(url,[data],[callback])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
下面是实战getJson方法
首先 创建一个辅助类，用于将dataset数据集转换成json字符串
代码如下:
public static string DataTableToJson(string jsonName, DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("{\"" + jsonName + "\":[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]}");
return Json.ToString();
}
此方法是msdn上的一个辅助类方法。
第二步 手动配置创建一个演示Dataset,但在项目中一般都是从数据库中或者service中获得数据
代码如下:
public static DataSet BindData()
{
DataTable dtData = new DataTable();
dtData.Columns.Add("id");
dtData.Columns.Add("name");
dtData.Columns.Add("sex");
DataRow drData;
drData = dtData.NewRow();
drData[0] = 16;
drData[1] = "zhaoliu";
drData[2] = "man";
dtData.Rows.Add(drData);
drData = dtData.NewRow();
drData[0] = 19;
drData[1] = "zhangsan";
drData[2] = "women";
dtData.Rows.Add(drData);
DataSet ds = new DataSet();
ds.Tables.Add(dtData);
return ds;
}
第三步 创建aspx页面
前台页面：两个button，一个单击开始解析json数据，另外一个查看json字符串
代码如下:
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#btn").click(function () {
$.getJSON("GetJsonDemo.aspx", { Action: "action" },
function (data) {
var txt = "";
$.each(data, function (k, v) { $.each(v, function (m, n) { txt += "id :"+n.id + ";name :" + n.name + ";sex :"+n.sex+"<br/>" }); });
$("#txt").html(txt);
});
});
});
$(function () {
$("#btn2").click(function () {
$.get("GetJsonDemo.aspx", { Action: "action" },
function (data) { $("#txt2").text(data); });
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btn" type="button" value="paser json" /><br />
<input id="btn2" type="button" value="watch json string" /><br />
<label id="txt"></label><br />
<label id="txt2"></label>
</div>
</form>
</body>
protected void Page_Load(object sender, EventArgs e)
{
JsonAjax();
}
private void JsonAjax() {
string action = Request["Action"];
if (!string.IsNullOrEmpty(action) && action == "action") //判断是否通过前台的点击事件进来的
{
string str = DataTableConvertJson.DataTableToJson("json", Data.BindData().Tables[0]);
Response.Write(str);
Response.End();
}
}
最后给大家展示一下生成的json格式：
Top of Form
{"json":[{"id":"16","name":"zhaoliu","sex":"man"},{"id":"19","name":"zhangsan","sex":"women"}]}
Bottomof Form
相关推荐
-
Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法
下面说一下,最近在使用jquery 1.4中使用$.ajax()方法解析json对象遇到的问题. Json对象是: 复制代码 代码如下: [{name:'二手房出售',infoCount:0,pageUrl:'/ershoufang'},{name:'二手房求购',infoCount:0,pageUrl:'/qiugou'},{name:'二手房装修',infoCount:0,pageUrl:'/esfzhuangxiu'},{name:'二手回收',infoCount:0,pageUrl:'/
-
利用jQuery解析获取JSON数据
JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的.从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生成图片和相关链接等: 复制代码 $(function(){ var url="http://api.flic
-
jQuery怎么解析Json字符串(Json格式/Json对象)
json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: { "comments": [ { "content": "很不错嘛", "id": 1, "nickname&
-
jquery eval解析JSON中的注意点介绍
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符
-
JQuery 解析多维的Json数据格式
这就要利用到JQuery,ASHX以及Json来合作了.一篇文章有多个评论,每十个为一页.用户每点击下一页则自动抓去下一页,这个过程采用无刷新放心进行. Json格式其实和表格式有异曲同工之妙,在网络传输中,它比XML还省流量,而且与JS有更好的融合,更容易被解析.Json格式样例如下: 复制代码 代码如下: {"Products":[ {"orderid":"11077","customerid":"RATTC&q
-
jquery JSON的解析方式
这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu
-
Jquery解析json字符串及json数组的方法
本文实例讲述了Jquery解析json字符串及json数组的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.6.2.min.js"></script> </head> <body> <hr /> <h3>
-
js/jquery解析json和数组格式的方法详解
在解析之前,我们必须弄清楚几个概念:数组,关联数组以及json之间有哪些区别和联系点? 一.概念介绍1.数组 语法: ECMAScript v3规定了数组直接量的语法,JavaScript 1.2和JScript 3.0实现了它.可以把-个用逗号分隔的表达式列表放在方括号中,创建并初始化-个数组.这些表达式的值将成为数组元素.例如: var a = [1, true, 'abc']; 具体操作查看API. ps:必须方括号隔开. 2.关联数组 1.语法:var myhash= {"key1″:&
-
JQuery解析HTML、JSON和XML实例详解
1.HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中. fragment.html文件,其内容: 复制代码 代码如下: <div>hello Jquery</div> 在主页面 Test.html中解析代码 复制代码 代码如下: $("#a1").click(function(){ $("#div2").load('fragment.html
-
jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera