本文在csdn我的个人博客中同样有介绍。
最近被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字符串
View Code
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，项目中就不能这样了。
View Code
1 public static DataSet BindData()
2 {
3 DataTable dtData = new DataTable();
4 dtData.Columns.Add("id");
5 dtData.Columns.Add("name");
6 dtData.Columns.Add("sex");
7 DataRow drData;
8 drData = dtData.NewRow();
9 drData[0] = 16;
10 drData[1] = "zhaoliu";
11 drData[2] = "man";
12 dtData.Rows.Add(drData);
13 drData = dtData.NewRow();
14 drData[0] = 19;
15 drData[1] = "zhangsan";
16 drData[2] = "women";
17 dtData.Rows.Add(drData);
18 DataSet ds = new DataSet();
19 ds.Tables.Add(dtData);
20 return ds;
21 }
第三步 创建aspx页面
前台页面：两个button，一个单击开始解析json数据，另外一个查看json字符串
View Code
1 <head runat="server">
2 <title></title>
3 <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
4 <script language="javascript" type="text/javascript">
5 $(function () {
6 $("#btn").click(function () {
7 $.getJSON("GetJsonDemo.aspx", { Action: "action" },
8 function (data) {
9 var txt = "";
10 $.each(data, function (k, v) { $.each(v, function (m, n) { txt += "id :"+n.id + ";name :" + n.name + ";sex :"+n.sex+"<br/>" }); });
11 $("#txt").html(txt);
12 });
13
14 });
15 });
16
17 $(function () {
18 $("#btn2").click(function () {
19 $.get("GetJsonDemo.aspx", { Action: "action" },
20 function (data) { $("#txt2").text(data); });
21 });
22
23 });
24 </script>
25 </head>
26 <body>
27 <form id="form1" runat="server">
28 <div>
29 <input id="btn" type="button" value="paser json" /><br />
30 <input id="btn2" type="button" value="watch json string" /><br />
31 <label id="txt"></label><br />
32 <label id="txt2"></label>
33 </div>
34 </form>
35 </body>
后台代码：
View Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 JsonAjax();
4 }
5 private void JsonAjax() {
6 string action = Request["Action"];
7 if (!string.IsNullOrEmpty(action) && action == "action") //判断是否通过前台的点击事件进来的
8 {
9 string str = DataTableConvertJson.DataTableToJson("json", Data.BindData().Tables[0]);
10 Response.Write(str);
11 Response.End();
12 }
13 }
最后给大家展示一下生成的json格式：
{"json":[{"id":"16","name":"zhaoliu","sex":"man"},{"id":"19","name":"zhangsan","sex":"women"}]}