最近看了幾篇 JSON 相關的使用文章後，發現其實不困難，也還蠻簡潔的。或許有很多小細節的地方我還沒發現，但大致上目前會用到的功能，都已經可以達到了。
首先，要先建立一個模擬後端的程式，用來產生 JSON 資料，準備給前端使用，而內容就大概長得像下面這個樣子。
{
"title":"jquery 入門",
"price":"299",
"author":"paladin lee"
}
只是最後要回傳的時候，需將物件序列化成 JSON 格式再回傳，而也只需使用下面這方法就可以了。
System.Web.Script.Serialization.JavaScriptSerializer().Serialize(stringValue)
所以我的後端程式如下：
ser01.ashx
public void ProcessRequest (HttpContext context) {
StringBuilder sb = new StringBuilder();
sb.Append(@"{
""title"":""jquery 入門"",
""price"":""299"",
""author"":""paladin lee""
}
");
//將 sb 物件序列化成JSON格式再回傳
context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}
接下來要處理的，就是前端了。透過 jQuery 的 getJSON() 方法，可以讓我們輕鬆的接收回傳的 JSON 資料。再透過 $.each() 來一一處理每個項目的內容。
$.each(data2, function (property, value) {
//Do something...
});
從後端所序列化的內容可知，回傳的資料裡面三筆，以第一筆為例， property 是 "title"，value 則是 "jquery 入門"。這裡要特別注意，因為回傳的 JSON 資料目前只是被視為字串，要透過 $.parseJSON() 將這 JSON 字串轉為 JSON 物件才能進一步被我們使用。
前端完整的測試程式則如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.tb
{
border-collapse:collapse ;
}
.tb th
{
border:1px solid black;
padding:5px;
}
.tb td
{
border:1px solid black;
padding:5px;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
$(function () {
$.getJSON("ser01.ashx", function (data) {
var vTable = $("<table class='tb' border='1'></table>");
var vItem01="";
//convert JSON string, not an object
var data2 = $.parseJSON(data);
$.each(data2, function (property, value) {
vItem01 = vItem01 + "<tr><th>" + property + "</th><td>" + value + "</td></tr>";
});
$(vTable).append(vItem01);
$(".div01").append(vTable);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="div01">
</div>
</form>
</body>
</html>
而畫面結果就會長成這樣子：
這時，或許你可能會說，我其實想要的，是類似好幾本書的資訊，而不是單單某一本書的詳細內容ㄟ！這其實也不難，首先來產生後端的資料，其內容大概如下：
[
{
"title":"jquery 入門",
"price":"299",
"author":"paladin lee"
},
{
"title":"html5 入門",
"price":"199",
"author":"Nikki"
},
{
"title":"麻將",
"price"":"99",
"author"":"jason"
}
]
同樣地，將他序列化後，就可以直接送出去了。
server02.ashx
public void ProcessRequest (HttpContext context) {
StringBuilder sb = new StringBuilder();
sb.Append(@"[
{
""title"":""jquery 入門"",
""price"":""299"",
""author"":""paladin lee""
},
{
""title"":""html5 入門"",
""price"":""199"",
""author"":""Nikki""
},
{
""title"":""麻將"",
""price"":""99"",
""author"":""jason""
}
]
");
//將 sb 物件序列化成JSON格式再回傳
context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}
至於前端的部份，我們則是透過兩次的 $.each() 來把回傳的 JSON 資料解析出來。
$.each(data, function () {
//處理每一筆的資料
$.each(this,function(property, value){
//處理每一個欄位的資料
});
});
完整前端程式如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.tb
{
border-collapse:collapse ;
}
.tb th
{
border:1px solid black;
padding:5px;
}
.tb td
{
border:1px solid black;
padding:5px;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
$(function () {
// test ser01
$.getJSON("server02.ashx", function (data) {
var vTable = $("<table class='tb' border='1'></table>");
var vItem01 = "";
//convert JSON string, not an object
var data2 = $.parseJSON(data);
//header
vItem01 += "<tr><th>title</th><th>price</th><th>author</th></tr>";
$.each(data2, function () {
vItem01+="<tr>";
$.each(this,function(property, value){
vItem01+="<td>"+value+"</td>";
});
vItem01 += "</tr>";
});
$(vTable).append(vItem01);
$(".div01").append(vTable);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="div01">
</div>
</form>
</body>
</html>
沒有留言:
張貼留言