[JSON] JSON 資料在 JQuery 上的運用

From: Polin Wei

JSON 即 JavaScript Object Natation，它是一種羽量級的資料交換格式，非常適合於伺服器與 JavaScript 的交互使用。JSON 也為 Web 應用開發者提供了另一種資料交換格式；JSON 同 XML 或 HTML 片段相比，JSON 提供了更好的簡單性和靈活性。

JSON 資料格式解析
和 XML 一樣，JSON 也是基於純文本的資料格式。由於 JSON 天生是為 JavaScript 準備的，因此，JSON 的資料格式非常簡單，您可以用 JSON 傳輸一個簡單的 String，Number，Boolean，也可以傳輸一個陣列，或者一個複雜的 Object 物件。 至於 物件 objects 與 陣列 arrays 的區分, 可以看這一篇文章 [JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得 取得瞭解

String，Number 和 Boolean 用 JSON 表示非常簡單。例如，用 JSON 表示一個簡單的 String "abc"，其格式為："abc"

除了字元 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要編碼外，其他 Unicode 字元可以直接輸出。

Boolean 類型表示為 true 或 false 。此外，JavaScript 中的 null 被表示為 null，注意，true、false 和 null 都沒有雙引號，否則將被視為一個 String 。

JSON 還可以表示一個陣列物件，使用 [] 包含所有元素，每個元素用逗號分隔，元素可以是任意的 Value，例如，以下陣列包含了一個 String，Number，Boolean 和一個 null：
["PolinWei",25,true,null]

Object 物件在 JSON 中是用 {} 包含一系列無序的 Key-Value 鍵值對表示的，實際上此處的 Object 相當於 Java 中的 Map，而不是 Java 的 Class 。注意 Key 只能用 String 表示。
例如，一個 Address 物件包含如下 Key-Value：

country: Taiwan
City: Taichung
postcode: 420


用 JSON 表示如下：
{"country":"Taiwan","City":"Taichung","postcode":420}

其中 Value 也可以是另一個 Object 或者陣列，因此，複雜的 Object 可以嵌套表示，例如，一個 申請者APPLIER 物件包含 員工基本資料( NAME, EMP_ID, Account) 和 簽核流程FLOW 物件 包含( ORDER, NAME, EMP_ID, COMPANY_NAME, DEPT_NAME)，可以表示如下：

{"APPLIER":[{"NAME":"王大明","EMP_ID":"E007","Account":"PolinWei"}],"FLOW":[
{"NAME":"張三","EMP_ID":"E002","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":0,"DEPT_NAME":"財務總處"},{"NAME"
:"李四","EMP_ID":"E001","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":1,"DEPT_NAME":"總經理室"}]}

假設伺服器返回的 JSON 資料是上面 code 裡的資料：

則在 JQuery 中, 可以這樣取得資料:
$(document).ready(function(){
        $.getJSON("DocFlow.do?reqCode=chgApplierJSON",{ function(userData){
            alert(userData.APPLIER[0].EMP_ID);  ==> 取得 APPLIER 物件第一筆的 EMP_ID 值
            alert(userData.APPLIER[0].NAME);    ==> 取得 APPLIER 物件第一筆的 NAME 值
            alert(userData.FLOW[0].EMP_ID);      ==> 取得 FLOW 物件第一筆的 EMP_ID 值
            alert(userData.FLOW[1].EMP_ID);      ==> 取得 FLOW 物件第二筆的 EMP_ID 值
        });
});


若想要快速取得物件中的資料, 則可以參考 JQuery 的 $.each() 函數, 例如要取得 JSON 回傳資料中的APPLIER 物件. 程式可以這樣寫
$.each(userData, function(i, val){
    if (i=="APPLIER"){
        $.each(val[0] , function(applier, a_val){
            alert("key:"+applier+" , value:"+a_val)
        });               
    }
});


取得的資料如下:
key: NAME , value: 王大明
key: EMP_ID , value: E007
key: Account , value: PolinWei