BloggerAds

2009年1月18日 星期日

[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

沒有留言:

張貼留言