Jquery解析json数据的实例详解

发布时间:2020-03-18编辑:脚本学堂
你了解Jquery解析json数据的方法吗?本文分享一个jquery解析jsono数据的例子,用来学习jquery json数据的操作方法,还是不错的。

首先,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页面。

1)、前台页面:两个button,一个单击开始解析json数据,另外一个查看json字符串。

代码:
 

复制代码 代码示例:
<head runat="server">
<title>创建aspx页面_http://www.jb200.com</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>

2)、后台页面:
 

复制代码 代码示例:
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