jQuery_接後端服務(WebService)之結果(JSON)

在剛開始接觸jQuery的時候，測試了一下怎麼呼叫WebService，之後也沒有做什麼偉大的應用，也就單單利用按鈕事件讓WebService在伺服器端執行罷了。

最近，想要把半年來jQuery的相關程式碼整理一下，才又翻開那個塵封已久的專案檔，這時候才發現當時僅接了一個字串回來就停住了。但是，接一個字串似乎處理不了比較複雜的問題；所以，希望可以從單單一個字串，可以進到一個類似表格的方式(想成DataTable、DataView)。

需求：呼叫WebService，返回一個多筆的資料庫查詢結果，並秀在頁面上。

其實，要做到這個功能，原本一個字串也可以，也就是定義好自己的格式，比如說：

可以表示為：1,Ola,18,12/20;2,fuchia,18,09/11這樣一個字串，接到以後再進行拆解的動作，就可以達到一樣的效果。

但是這樣就變成自己要在WebService寫組字串的函式，又要在JavaScript寫拆字串的函式，而且也要自行去對應各欄位為第幾個；當然，jQuery之所以這麼多愛好者，他當然早就幫我們想好了，傳遞的方式可以利用網路上也很火紅的JSON格式。

JSON格式長什麼樣子，如果以上面那張表來說，JSON可以長成：
[{'ID':1,'Name':'Ola','Age':18,'Birthday':'12/20'},{'ID':2,'Name':'fuchia','Age':18,'Birthday':'09/11'}]
有幾個重點：
1. 字串要用''包住，數字不需要。
2. 每一組資料用大括號{}包住。
3. 每一組資料用逗號(,)分開。
4. 資料組用中括號[]包住。

所以不管是用什麼樣的方式呼叫，我們最後返回一個JSON格式的字串就對了。

-------------------------------------------------------

如果在網路上搜尋jQuery+JSON會找到很多使用getJSON()來實做的範例，但是因為我們已經藉由WebService取得了JSON字串，而我也找不出WebService跟getJSON()要怎麼結合在一起，所以最後是使用parseJSON()函式來進行轉換。

整個流程可以看成：


怎麼呼叫WebService之前已經寫過了，重點就放在parseJSON()上。

去查parseJSON()的官方文件講了一個重點：
Passing in a malformed JSON string may result in an exception being thrown. For example, the following are all malformed JSON strings:
{test: 1} (test does not have double quotes around it).
{'test': 1} ('test' is using single quotes instead of double quotes).
就是我們不可以丟不正確的字串給他轉，那怎樣叫做正確？就是要用雙引號，也就是{"test": 1}。

所以在WebService丟出JSON字串時，必須要用跳脫字元(\)處理後，才可以傳出。

---------------------------------------------------------

有了正確的JSON後，我們就可以在success內做處理：

$.ajax({
type: "POST",
dataType: "json",
url: "../WebService/TalkRoom.asmx/GetSayString",
contentType: "application/json; charset=utf-8",
data: "{ToName:'" + UserName + "'}",
success: function (data) {
var obj = jQuery.parseJSON(data.d);
$.each(obj, function (key, val) {
var Say = "[" + val.SayTime + "] " + val.FromName + " : " + val.SayString;
alert(Say );
});

},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});

說明：
1. 首先WebService成功呼叫後執行success內的function，返回一個data
2. 利用parseJSON將返回的字串(data.d)轉為JSON物件。
3. 利用$.each來遍尋整個obj物件
4. 利用val.欄位名稱來取值。

**************************************************************
最後，就可以利用這個技巧，做一個很無聊的東西......請見下篇。