你不可不知的 JSON 基本介紹

• 什麼是 JSON
• JSON 應用在哪些地方
• 如何建立 JSON 字串
• 一個簡單的 JSON 範例
• JSON vs XML
• 如何透過 PHP 及 JavaScript 使用 JSON
  

什麼是 JSON

JSON 是個以純文字為基底去儲存和傳送簡單結構資料，你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件)，也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料，就可以非常簡單的跟其他程式溝通或交換資料，因為 JSON 就只是純文字個格式。

JSON 的優點如下:

• 相容性高
• 格式容易瞭解，閱讀及修改方便
• 支援許多資料格式 (number,string,booleans,nulls,array,associative array)
• 許多程式都支援函式庫讀取或修改 JSON 資料
  

JSON 應用在哪些地方

JSON 最常用用在 Web 網頁程式從 Server 端傳送資料給 browser，典型範例就是透過 AJAX 方式交換 JSON 資料，底下簡單舉個範例

• 使用者點選了線上產品縮圖
• JavaScript 透過 AJAX 方式將產品 ID 傳送給伺服器端
• 伺服器端收到 ID，將產品資料 (ex 價格,描述) 編碼成 JSON 資料，並且回傳給瀏覽器
• JavaScript 收到 JSON 資料，將其解碼 (decode) 並且將資料顯示在網頁上
  

您也可以透過網頁將 JSON 資料傳到伺服器端，這都是可以的，把 POST 或 GET 資訊編碼成 JSON 格式即可，如果有在使用 jQuery，它提供了兩個函式處理 JSON，分別是 getJSON 跟 parseJSON。

如何建立 JSON 字串

可以透過底下規則來建立 JSON 字串

• JSON 字串可以包含陣列 Array 資料或者是物件 Object 資料
• 陣列可以用 [ ] 來寫入資料
• 物件可以用 { } 來寫入資料
• name / value 是成對的，中間透過 (:) 來區隔
  

物件或陣列的 value 值可以如下:

• 數字 (整數或浮點數)
• 字串 (請用 “” 括號)
• 布林函數 (boolean) (true 或 false)
• 陣列 (請用 [ ] )
• 物件 (請用 { } )
• NULL
  

一個簡單的 JSON 範例[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18

[size=1em][size=1em]{ [size=1em]  "orderID": 12345, [size=1em]  "shopperName": "John Smith", [size=1em]  "shopperEmail": "[email protected]", [size=1em]  "contents": [ [size=1em]    { [size=1em]      "productID": 34, [size=1em]      "productName": "SuperWidget", [size=1em]      "quantity": 1 [size=1em]    }, [size=1em]    { [size=1em]      "productID": 56, [size=1em]      "productName": "WonderWidget", [size=1em]      "quantity": 3 [size=1em]    } [size=1em]  ], [size=1em]  "orderCompleted": true [size=1em]}

由上面例子我們可以發現 contents 陣列裡面又包含物件，透過上面例子，我們寫成 JavaScript 如下:

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20

[size=1em][size=1em]<script type="text/javascript"> [size=1em]var cart = { [size=1em]  "orderID": 12345, [size=1em]  "shopperName": "John Smith", [size=1em]  "shopperEmail": "[email protected]", [size=1em]  "contents": [ [size=1em]    { [size=1em]      "productID": 34, [size=1em]      "productName": "SuperWidget", [size=1em]      "quantity": 1 [size=1em]    }, [size=1em]    { [size=1em]      "productID": 56, [size=1em]      "productName": "WonderWidget", [size=1em]      "quantity": 3 [size=1em]    } [size=1em]  ], [size=1em]  "orderCompleted": true [size=1em]}; [size=1em]</script>

JSON vs XML

在許多方面，你可以想像 JSON 來替代 XML，在過去 Web Application 開發 AJAX 都是透過 XML 來交換資料，但是你可以發現近幾年來 JSON 已經漸漸取代 XML 格式了，為什麼會變成這樣呢？因為 JSON 格式容易閱讀且好修改，許多程式語言分別開發了函式庫來處理 JSON 資料，我們可以把上面的 JSON 資料改寫成 XML 如下:

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22 [size=1em]23 [size=1em]24 [size=1em]25 [size=1em]26 [size=1em]27 [size=1em]28 [size=1em]29 [size=1em]30 [size=1em]31 [size=1em]32 [size=1em]33 [size=1em]34 [size=1em]35 [size=1em]36 [size=1em]37 [size=1em]38 [size=1em]39 [size=1em]40 [size=1em]41 [size=1em]42 [size=1em]43 [size=1em]44 [size=1em]45 [size=1em]46 [size=1em]47 [size=1em]48 [size=1em]49 [size=1em]50 [size=1em]51

[size=1em][size=1em]<object> [size=1em]  <property> [size=1em]    <key>orderID</key> [size=1em]    <number>12345</number> [size=1em]  </property> [size=1em]  <property> [size=1em]    <key>shopperName</key> [size=1em]    <string>John Smith</string> [size=1em]  </property> [size=1em]  <property> [size=1em]    <key>shopperEmail</key> [size=1em]    <string>[email protected]</string> [size=1em]  </property> [size=1em]  <property> [size=1em]    <key>contents</key> [size=1em]    <array> [size=1em]      <object> [size=1em]        <property> [size=1em]          <key>productID</key> [size=1em]          <number>34</number> [size=1em]        </property> [size=1em]        <property> [size=1em]          <key>productName</key> [size=1em]          <string>SuperWidget</string> [size=1em]        </property> [size=1em]        <property> [size=1em]          <key>quantity</key> [size=1em]          <number>1</number> [size=1em]        </property>         [size=1em]      </object> [size=1em]      <object> [size=1em]        <property> [size=1em]          <key>productID</key> [size=1em]          <number>56</number> [size=1em]        </property> [size=1em]        <property> [size=1em]          <key>productName</key> [size=1em]          <string>WonderWidget</string> [size=1em]        </property> [size=1em]        <property> [size=1em]          <key>quantity</key> [size=1em]          <number>3</number> [size=1em]        </property> [size=1em]      </object> [size=1em]    </array> [size=1em]  </property> [size=1em]  <property> [size=1em]    <key>orderCompleted</key> [size=1em]    <boolean>true</boolean> [size=1em]  </property>   [size=1em]</object>

大家有沒有發現 XML 的資料量遠大於 JSON 資料量，這也是 JSON 優於 XML 的原因之一

如何利用 JavaScript 來處理 JSON 資料

直接看例子比較快:

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22 [size=1em]23 [size=1em]24

[size=1em][size=1em]<script type="text/javascript"> [size=1em]var cart = { [size=1em]  "orderID": 12345, [size=1em]  "shopperName": "John Smith", [size=1em]  "shopperEmail": "[email protected]", [size=1em]  "contents": [ [size=1em]    { [size=1em]      "productID": 34, [size=1em]      "productName": "SuperWidget", [size=1em]      "quantity": 1 [size=1em]    }, [size=1em]    { [size=1em]      "productID": 56, [size=1em]      "productName": "WonderWidget", [size=1em]      "quantity": 3 [size=1em]    } [size=1em]  ], [size=1em]  "orderCompleted": true [size=1em]}; [size=1em]alert ( JSON.stringify( cart ) ); [size=1em]</script>

透過 JSON.stringify 來轉換資料，產生結果如下

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04

[size=1em][size=1em]{"orderID":12345,"shopperName":"John Smith","shopperEmail":"[email protected]", [size=1em]"contents":[{"productID":34,"productName":"SuperWidget","quantity":1}, [size=1em]{"productID":56,"productName":"WonderWidget","quantity":3}], [size=1em]"orderCompleted":true}

如何將 JSON 字串傳入 JavaScript 變數

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22 [size=1em]23 [size=1em]24 [size=1em]25 [size=1em]26 [size=1em]27 [size=1em]28 [size=1em]29

[size=1em][size=1em]<script type="text/javascript"> [size=1em]var jsonString = "                           [size=1em]{                                           [size=1em]  "orderID": 12345,                         [size=1em]  "shopperName": "John Smith",               [size=1em]  "shopperEmail": "[email protected]",   [size=1em]  "contents": [                              [size=1em]    {                                        [size=1em]      "productID": 34,                      [size=1em]      "productName": "SuperWidget",          [size=1em]      "quantity": 1                         [size=1em]    },                                       [size=1em]    {                                        [size=1em]      "productID": 56,                      [size=1em]      "productName": "WonderWidget",         [size=1em]      "quantity": 3                         [size=1em]    }                                        [size=1em]  ],                                        [size=1em]  "orderCompleted": true                     [size=1em]}                                           [size=1em]"; [size=1em]var cart = JSON.parse ( jsonString ); [size=1em]alert ( cart.shopperEmail ); [size=1em]alert ( cart.contents[1].productName ); [size=1em]</script>

結果如下

cart.shopperEmail 輸出 [email protected] cart.contents[1].productName 輸出 WonderWidget

利用 PHP 建立或讀取 JSON 資料

PHP 直接有寫好函式庫可以處理 JSON 字串，就是利用 json_encode 跟 json_decode

範例:

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22

[size=1em][size=1em]<?php [size=1em]$cart = array( [size=1em]  "orderID" => 12345, [size=1em]  "shopperName" => "John Smith", [size=1em]  "shopperEmail" => "[email protected]", [size=1em]  "contents" => array( [size=1em]    array( [size=1em]      "productID" => 34, [size=1em]      "productName" => "SuperWidget", [size=1em]      "quantity" => 1 [size=1em]    ), [size=1em]    array( [size=1em]      "productID" => 56, [size=1em]      "productName" => "WonderWidget", [size=1em]      "quantity" => 3 [size=1em]    ) [size=1em]  ), [size=1em]  "orderCompleted" => true [size=1em]); [size=1em]echo json_encode( $cart ); [size=1em]?>

輸出

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01

[size=1em][size=1em]{"orderID":12345,"shopperName":"John Smith","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"SuperWidget","quantity":1},{"productID":56,"productName":"WonderWidget","quantity":3}],"orderCompleted":true}

大家可以發現，我們只要用 array 方式將資料輸出，再透過 json_encode 就可以了，接下來看看底下 PHP 如何讀取 JSON 字串

[backcolor=rgb(27, 36, 38) !important][size=1em]

[size=1em]01 [size=1em]02 [size=1em]03 [size=1em]04 [size=1em]05 [size=1em]06 [size=1em]07 [size=1em]08 [size=1em]09 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22 [size=1em]23 [size=1em]24 [size=1em]25 [size=1em]26

[size=1em][size=1em]<?php [size=1em]$jsonString = " [size=1em]{                                           [size=1em]  "orderID": 12345,                         [size=1em]  "shopperName": "John Smith",               [size=1em]  "shopperEmail": "[email protected]",   [size=1em]  "contents": [                              [size=1em]    {                                        [size=1em]      "productID": 34,                      [size=1em]      "productName": "SuperWidget",          [size=1em]      "quantity": 1                         [size=1em]    },                                       [size=1em]    {                                        [size=1em]      "productID": 56,                      [size=1em]      "productName": "WonderWidget",         [size=1em]      "quantity": 3                         [size=1em]    }                                        [size=1em]  ],                                        [size=1em]  "orderCompleted": true                     [size=1em]}                                           [size=1em]"; [size=1em]$cart = json_decode( $jsonString ); [size=1em]echo $cart->shopperEmail . "<br>"; [size=1em]echo $cart->contents[1]->productName . "<br>"; [size=1em]?>

很簡單吧，PHP 利用了 json_decode 方式將 json 轉成變數資料以便讀取內容。