你不可不知的 JSON 基本介紹

還不知道 JSON 是什麼嘛？本篇教學會帶您瞭解 JSON 在網站上的應用，以及運作流程跟使用 PHP 和 JavaScript 來處理 JSON。假如您現在的工作就是網站設計師，相信一定聽過 JSON，但是什麼是 JSON，它能夠做什麼，及您能透過它在網站上做到哪些事情呢？

透過本篇介紹您可以瞭解基本的 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 資料，底下簡單舉個範例

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

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

如何建立 JSON 字串

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

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

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

1. 數字 (整數或浮點數)
2. 字串 (請用 “” 括號)
3. 布林函數 (boolean) (true 或 false)
4. 陣列 (請用 [ ] )
5. 物件 (請用 { } )
6. NULL

一個簡單的 JSON 範例

  "orderID": 12345,
  "shopperName": "John Smith",
  "shopperEmail": "johnsmith@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
}

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

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

JSON vs XML

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

<object>
  <property>
    <key>orderID</key>
    <number>12345</number>
  </property>
  <property>
    <key>shopperName</key>
    <string>John Smith</string>
  </property>
  <property>
    <key>shopperEmail</key>
    <string>johnsmith@example.com</string>
  </property>
  <property>
    <key>contents</key>
    <array>
      <object>
        <property>
          <key>productID</key>
          <number>34</number>
        </property>
        <property>
          <key>productName</key>
          <string>SuperWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>1</number>
        </property>
      </object>
      <object>
        <property>
          <key>productID</key>
          <number>56</number>
        </property>
        <property>
          <key>productName</key>
          <string>WonderWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>3</number>
        </property>
      </object>
    </array>
  </property>
  <property>
    <key>orderCompleted</key>
    <boolean>true</boolean>
  </property>
</object>

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

如何利用 JavaScript 來處理 JSON 資料

直接看例子比較快:

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

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

{"orderID":12345,"shopperName":"John Smith","shopperEmail":"johnsmith@example.com",
"contents":[{"productID":34,"productName":"SuperWidget","quantity":1},
{"productID":56,"productName":"WonderWidget","quantity":3}],
"orderCompleted":true}

如何將 JSON 字串傳入 JavaScript 變數

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

結果如下

cart.shopperEmail 輸出 johnsmith@example.com cart.contents[1].productName 輸出 WonderWidget

利用 PHP 建立或讀取 JSON 資料

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

範例:

<?php
$cart = array(
  "orderID" => 12345,
  "shopperName" => "John Smith",
  "shopperEmail" => "johnsmith@example.com",
  "contents" => array(
    array(
      "productID" => 34,
      "productName" => "SuperWidget",
      "quantity" => 1
    ),
    array(
      "productID" => 56,
      "productName" => "WonderWidget",
      "quantity" => 3
    )
  ),
  "orderCompleted" => true
);
echo json_encode( $cart );
?>

輸出

{"orderID":12345,"shopperName":"John Smith","shopperEmail":"johnsmith@example.com","contents":[{"productID":34,"productName":"SuperWidget","quantity":1},{"productID":56,"productName":"WonderWidget","quantity":3}],"orderCompleted":true}

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

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

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

結論

這篇介紹主要是讓大家對 JSON 有基本得瞭解，以及如何用 JavaScript 跟 PHP 處理 JSON 資料，其實就不難，希望對大家有幫助。

本篇範例皆來自 JSON Basics: What You Need to Know 文章

PHP 回傳 JSON 很方便, 只要將資料經過 json_encode() 就解決了.

不過因為 PHP 自動轉換型別, 造成很多資料都習慣存成字串, 希望在輸出 JSON 的時候, 數字部份可以輸出成數字, 該怎麼做呢?

另一個問題, PHP 轉換成 JSON, 部份陣列會被轉成物件(因為 JavaScript 陣列的 Key 必須是數字, 所以會轉成物件), 要全部強制轉成物件, 該怎麼做呢?

PHP 讓 json_encode() 指定回傳格式

上述的問題, json_encode() 的參數都可以解決.

json_encode() 有這些參數可以用:

• JSON_HEX_QUOT
• JSON_HEX_TAG
• JSON_HEX_AMP
• JSON_HEX_APOS
• JSON_NUMERIC_CHECK
• JSON_PRETTY_PRINT
• JSON_UNESCAPED_SLASHES
• JSON_FORCE_OBJECT

PHP 判斷型別輸出 JSON 數字型態

主要靠 json_encode 的 JSON_NUMERIC_CHECK 參數, ex:

<?php
echo json_encode(array('id' => '123', 'data' => 'abc'), JSON_NUMERIC_CHECK);
echo json_encode(array('id' => '123', 'data' => 'abc'));
echo json_encode(array('id' => 123, 'data' => 'abc'));
?>

輸出結果

• {"id":123,"data":"abc"}
• {"id":"123","data":"abc"}
• {"id":123,"data":"abc"}

PHP 強迫輸出 JSON 物件格式

主要靠 json_encode 的 JSON_FORCE_OBJECT 參數, ex:

<?php
echo json_encode(array(1, 2, 3));
echo json_encode(array(1, 2, 3), JSON_FORCE_OBJECT);
echo json_encode(array(array(1, 2, 3)));
echo json_encode(array(array(1, 2, 3)), JSON_FORCE_OBJECT);
echo json_encode(array(1 => 123, 2 => 'abc'));
?>

輸出結果

• [1,2,3]
• {"0":1,"1":2,"2":3}
• [[1,2,3]]
• {"0":{"0":1,"1":2,"2":3}}
• {"1":123,"2":"abc"} // 本來就會輸出 Object

作者： 阮一峰

日期： 2011年1月14日

目前， JSON已經成為最流行的數據交換格式之一，各大網站的API幾乎都支持它。

我寫過一篇 《數據類型和JSON格式》，探討它的設計思想。今天，我想總結一下PHP語言對它的支持，這是開發互聯網應用程式（特別是編寫API）必須瞭解的知識。

從5.2版本開始，PHP原生提供 json_encode()和 json_decode()函數，前者用於編碼，後者用於解碼。

一、json_encode()

該函數主要用來將數組和對象，轉換為json格式。先看一個數組轉換的例子：

　　$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
　　
　　echo json_encode($arr);
　　

結果為

　　{"a":1,"b":2,"c":3,"d":4,"e":5}
　　

再看一個對像轉換的例子：

　　$obj->body           = 'another post';
　　
　　$obj->id             = 21;
　　
　　$obj->approved       = true;
　　
　　$obj->favorite_count = 1;
　　
　　$obj->status         = NULL;
　　
　　echo json_encode($obj);
　　

結果為

　　{
　　　　"body":"another post",
　　
　　　　"id":21,
　　
　　　　"approved":true,
　　
　　　　"favorite_count":1,
　　
　　　　"status":null
　　}
　　

由於json只接受utf-8編碼的字符，所以json_encode()的參數必須是utf-8編碼，否則會得到空字符或者null。當中文使用GB2312編碼，或者外文使用ISO-8859-1編碼的時候，這一點要特別注意。

二、索引數組和關聯數組

PHP支持兩種數組，一種是只保存"值"（value）的索引數組（indexed array），另一種是保存"名值對"（name/value）的關聯數組（associative array）。

由於javascript不支持關聯數組，所以json_encode()只將索引數組（indexed array）轉為數組格式，而將關聯數組（associative array）轉為對像格式。

比如，現在有一個索引數組

　　$arr = Array('one', 'two', 'three');
　　
　　echo json_encode($arr);
　　

結果為：

　　["one","two","three"]
　　

如果將它改為關聯數組：

　　$arr = Array('1'=>'one', '2'=>'two', '3'=>'three');
 　　
　　echo json_encode($arr);
　　　　

結果就變了：

　　{"1":"one","2":"two","3":"three"}
　　

注意，數據格式從"[]"（數組）變成了"{}"（對像）。

如果你需要將"索引數組"強制轉化成"對像"，可以這樣寫

　　json_encode( (object)$arr );
　　

或者

　　json_encode ( $arr, JSON_FORCE_OBJECT );
　　

三、類（class）的轉換

下面是一個PHP的類：

　　class Foo {
　　
　　　　const     ERROR_CODE = '404';
　　
　　　　public    $public_ex = 'this is public';
　　
　　　　private   $private_ex = 'this is private!';
　　
　　　　protected $protected_ex = 'this should be protected';
 　　
　　　　public function getErrorCode() {
　　
　　　　　　return self::ERROR_CODE;
　　
　　　　}
　　
　　}
　　

現在，對這個類的實例進行json轉換：

　　$foo = new Foo;
　　
　　$foo_json = json_encode($foo);
　　
　　echo $foo_json;
　　

輸出結果是

　　{"public_ex":"this is public"}
　　

可以看到，除了公開變量（public），其他東西（常量、私有變量、方法等等）都遺失了。

四、json_decode()

該函數用於將json文本轉換為相應的PHP數據結構。下面是一個例子：

　　$json = '{"foo": 12345}';
 　　
　　$obj = json_decode($json);
　　
　　print $obj->{'foo'}; // 12345
　　

通常情況下，json_decode()總是返回一個PHP對象，而不是數組。比如：

　　$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
 　　
　　var_dump(json_decode($json));
　　

結果就是生成一個PHP對像：

　　object(stdClass)#1 (5) {
　　
　　　　["a"] => int(1)
　　　　["b"] => int(2)
　　　　["c"] => int(3)
　　　　["d"] => int(4)
　　　　["e"] => int(5)
　　
　　}
　　

如果想要強制生成PHP關聯數組，json_decode()需要加一個參數true：

　　$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
 　　
　　var_dump(json_decode($json,true));
　　

結果就生成了一個關聯數組：

　　array(5) {
　　
　　 　　["a"] => int(1)
　　 　　["b"] => int(2)
　　 　　["c"] => int(3)
　　 　　["d"] => int(4)
　　 　　["e"] => int(5)
　　
　　}
　　

五、json_decode()的常見錯誤

下面三種json寫法都是錯的，你能看出錯在哪裡嗎？

　　$bad_json = "{ 'bar': 'baz' }";
　　
　　$bad_json = '{ bar: "baz" }';
　　
　　$bad_json = '{ "bar": "baz", }';
　　

對這三個字符串執行json_decode()都將返回null，並且報錯。

第一個的錯誤是，json的分隔符（delimiter）只允許使用雙引號，不能使用單引號。第二個的錯誤是，json名值對的"名"（冒號左邊的部分），任何情況下都必須使用雙引號。第三個的錯誤是，最後一個值之後不能添加逗號（trailing comma）。

另外，json只能用來表示對像（object）和數組（array），如果對一個字符串或數值使用json_decode()，將會返回null。

　　var_dump(json_decode("Hello World")); //null
　　

六、參考材料

　　[1] PHP Manual

　　[2] Ed Finkler, JSON is Everybody's Friend

（完）