2011年5月16日 星期一

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.欄位名稱來取值。

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

沒有留言:

張貼留言