javascript 如何搜尋 JSON 物件？

簡介

---

在 client 端，有些功能藉由非同步方式取得 JSON 資料。如果想要搜尋特定資料，該如何做呢？

範例：搜尋 JSON 物件

---

關鍵字

• jQuery.grep()
• JSON 

參考資料

• jQuery.grep()
• JSON

元件效果

顯示/隱藏元件

• 顯示/隱藏元件 .toggle()

附註：以上關鍵字可參考 JQuery API：http://api.jquery.com/

AJAX 與 WEB SERVICE 溝通

開發簡介

• AJAX 使用 jQuery 的 ajax 功能
• WEB SERVICE 採用 VB.NET 撰寫

參考範例

• 匿名物件的變數名稱pid與 WEB SERVICE 的參數名稱pid相同
• 監看 javascript 執行過程或執行結果，請參考 CHROME DEVELOPER TOOL

前端程式碼

// 匿名物件
var person = { pid: 'A123456789' };

// 匿名物件轉為 JSON 字串
var params = JSON.stringify( person ); 

$.ajax({
   type: "POST", 
   url: "../../WebService.asmx/FindPerson",    // WEB SERVICE
   data: params,                                   // 參數
   contentType: "application/json; charset=utf-8", // 參數格式
   dataType: "json", // 回傳格式
   success: function(response) {

     // 將 WEB SERVICE 回傳的字串轉為物件  
     var jsonObj = $.parseJSON(response.d);

     // 使用 chrome 按 F12 選擇 console 即可看到結果
     console.log("Hello, I am " + jsonObj.name);

   } // ajax 執行成功
   , failure: function(msg) { } // ajax 執行失敗
   ,error: function(msg) { }    // ajax 執行發生錯誤
});

後端程式碼

    // WEB SERVICE 
    <WebMethod(True)> _
    Public Function FindPerson(ByVal pid As String) As String
        // DB 取出 Person 物件資料(附註DataTable轉Object可參考LINQ)
        Dim pObj AS Person = db.SelectPerson(pid) 

        // 將物件序列化為字串
        Return New JavaScriptSerializer().Serialize( pObj )
    End Function

    // 物件
    Class Person
        Public name As String
    End Class

jQuery HTML Table 操作篇

Table 奇偶數列變色 + 滑鼠移出移入效果

版本一

• 基、偶數列 :odd :even
• 動態增加 CSS .addClass()
• 動態刪除 CSS.removeClass()
• 按鈕事件綁定 .on()
• 滑鼠進入元件 .mouseenter()
• 滑鼠離開元件 .mouseout()

優點：支援動態增加資料。(注意：CSS 優先順序)
附註：以上關鍵字可參考 JQuery API：http://api.jquery.com/

版本二

• 滑鼠移出移入 .hover()

Javascript 線上練習環境

jsfiddle 簡介

提供線上練習 Javascript 框架(Framework) ，例如：JQuery, Prototype, Mootools, YUI, Dojo ... 等等。 練習環境分為兩個區塊，左邊區塊為設定使用的 framework 或 其他相關設定，右邊區塊為撰寫 CSS + JavaScript + HTML 與結果。 另外，申請帳號後，寫完程式可儲存並分享給其他人喔！http://jsfiddle.net/

範例 Hello jQuery

• 關鍵字 "jQuery" 與 "$"
• 動態增加 CSS .addClass()
• 動態附加元件.appendTo()
• 動態增加按鈕及按鈕屬性 JQuery()
• 按鈕事件綁定 .click()
• 動態切換 CSS .toggleClass()

附註：以上關鍵字可參考 JQuery API：http://api.jquery.com/