Jquery解析json數(shù)據(jù)詳解
最近被jquery折磨了一番,倒騰了一個jquery解析json的demo,本demo想實現(xiàn)從asp.net后臺實例化dataSet或者dataTable數(shù)據(jù)集,將dataSet轉(zhuǎn)換成json并返回給客戶端,客戶端用jquery getJson方法解析出來并顯示在頁面上。
首先簡單介紹一下getJson方法
Jquery.getJson(url,[data],[callback])
url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:載入成功時回調(diào)函數(shù)。
下面是實戰(zhàn)getJson方法
首先 創(chuàng)建一個輔助類,用于將dataset數(shù)據(jù)集轉(zhuǎn)換成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上的一個輔助類方法。
第二步 手動配置創(chuàng)建一個演示Dataset,但在項目中一般都是從數(shù)據(jù)庫中或者service中獲得數(shù)據(jù)
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;
}
第三步 創(chuàng)建aspx頁面
前臺頁面:兩個button,一個單擊開始解析json數(shù)據(jù),另外一個查看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
- JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實現(xiàn)方法
- JavaScript中解析JSON數(shù)據(jù)的三種方法
- JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解
- JavaScript處理解析JSON數(shù)據(jù)過程詳解
- jQuery使用ajax方法解析返回的json數(shù)據(jù)功能示例
- javascript解析json數(shù)據(jù)的3種方式
- json數(shù)據(jù)傳到前臺并解析展示成列表的方法
- javascript對JSON數(shù)據(jù)排序的3個例子
- js解析與序列化json數(shù)據(jù)(二)序列化探討
- javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼
- JavaScript解析JSON數(shù)據(jù)示例
相關(guān)文章
jQuery實現(xiàn)B2B網(wǎng)站后臺管理系統(tǒng)側(cè)導航
這篇文章主要介紹了jQuery實現(xiàn)B2B網(wǎng)站后臺管理系統(tǒng)側(cè)導航,文中示例代碼非常詳細,幫助大家更好的理解和學習,感興趣的朋友可以了解下2020-07-07JQueryMiniUI按照時間進行查詢的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫QueryMiniUI按照時間進行查詢的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新
這篇文章主要介紹了jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12