JQ總務處｜處理JSON資料｜深入淺出jQuery

前言

從 XML 檔讀取資料雖有用，但那並不一定能達成，還有一種更有效率的資料交換格式 — JSON ，讓從伺服端獲取資料變得更容易，並且 JSON 也比 XML 更容易產生及讀取，透過 jQuery 、 PHP 和 SQL ，可以學習如何建立資料庫儲存資訊，以便在稍後使用 JSON 再次擷取它，並且使用 jQuery 將它展示在畫面上。

（ 圖片來源 ）

如何處理資料

有兩種 HTTP 方法可用來傳送資料給伺服器： GET 與 POST ，主要區別在於資料如何被傳送給伺服器。

GET

將表單欄位的名稱與值，以鍵／值對的形式，附加到 URL 末端， PHP 能夠把這些資訊從名為 $_GET[] 的關聯陣列中讀出，那會在表單被提交時傳送給伺服器。

// URL
contact.php?a=1&b=2

資料在 URL 的問號後並且是可見的。

POST

傳送資料也是用關聯陣列，不過有進行編碼，而且使用者無法從 URL 上看到資料， $_POST[] 關聯陣列包含表單元素的全部資訊，如同 GET 陣列也是一系列由表單之元素名稱與值所構成的鍵／值對。

// URL
contact.php

傳送前先格式化資料

在把資訊傳送到伺服器（ 使用 Ajax ）前，需要做一點準備工作，把它整理成 Ajax 呼叫能夠傳送且伺服器可以理解的格式，要這麼做，必須將我們的資料序列化到單一物件中，好讓 Ajax 呼叫能夠把它作為單一包裹來傳送， jQuery 針對資訊序列化提供兩個表單輔助方法： serialize 與 serializeArray 。

serialize

將表單的全部輸入整合到由一個個鍵／值對（ 以 & 符號相隔 ）所組成的單一字串中。

<form id="my_form">
    <input type="text" name="a" value="1" />
    <input type="text" name="b" value="2" />
    <input type="hidden" name="c" value="3" />
</form>

$("#my_form").serialize();

// 結果
a=1&b=2&c=3

serializeArray

建立由一個個鍵／值對所構成的關聯陣列，這還是單一物件，但確實比單純 serialize 方法的結果更具結構性。

<form id="my_form">
    <input type="text" name="a" value="1" />
    <input type="hidden" name="c" value="3" />
</form>

// 後面跟著 HTML input 元素過濾器，告訴瀏覽器只選取 input 類型的 HTML 元素
$("#my_form:input").serializeArray();

// 結果
[
    {
        name: "a",
        value: "1"
    },
    {
        name: "c",
        value: "3"
    }
]

用 POST 把資料送到伺服器

post 專門用來將資料傳送給伺服器，接受多個參數，包括資料傳送之目的地的 URL ，以及當 POST 完成時要執行的處理器函式。

1. 資料傳送之目的地的 URL 。
2. 你想要傳送的資訊，業經序列化。
3. 執行此回呼函式（ callback ）。
4. 回傳的資料，在名為 json 的物件中。

在 MySQL 資料庫裡儲存你的資料

關聯式資料庫管理系統（ Relational Database Management Systems ， RDBMS ）是極端組織化的應用程式，適用於儲存、組織以及紀錄你的各種資料片段之間的關係。

經常被稱作資料庫伺服器，我們使用名為 MySQL 的免費資料庫伺服器，然後再用一種資料庫伺服器能夠理解的語言與它溝通（ 例如： SQL ），資料庫伺服器通常與 Web 伺服器執行在同一個地方，有時甚至在同一台伺服器上，協同合作、讀寫資料及交付網頁。

MySQL 中的「 SQL 」代表 Structured Query Language （ 結構化查詢語言 ），而 MySQL 將資料儲存在資料庫裡的資料表（ table ）。

Web 伺服器處理網頁請求流程

MySQL 資料庫被組織成許多資料表，以欄列的形式儲存相關資料，大多數 Web 應用程式使用單一資料庫上的一或多個資料表，有點像是檔案櫃裡的不同檔案匣。

SQL 的 insert 陳述式剖析

為了把資料放進資料庫資料表，我們使用 insert 陳述式。

1. 使用關鍵字 insert into 。
2. 指名要把資料放進哪個資料表。
3. 想把資料放進哪些資料欄（ 以逗號分隔 ）。
4. 關鍵字 values 指名資料欄清單結束，接下來是實際的值。
5. 要放進資料表的值，對應到前述資料欄（ 以逗號分隔 ）。

雖非必要，但建議以想要插入資料的順序指定資料欄，不明確地指名資料欄會導致資料產生問題，因為它會自動把第一個值放進第一個資料欄，第二個值放第二個資料欄，以此類推，所以你必須非常熟悉你的資料表，才能夠對使用這方式有信心。

資料欄名稱與值的順序是有影響的
值必須以完全相同於資料欄的順序被列出，資料庫才能知道要把資料放在哪。

在伺服器上用 PHP 處理 POST 資料

我們已經看過將瀏覽器裡的表單資訊傳送到伺服器的物件： $_POST 物件，這是一個關聯陣列，包含你所傳送的全部資訊，以 HTML 元素的名稱（ 而非 ID ）作為關鍵陣列的鍵，並且以 HTML 元素裡的資訊作為關鍵陣列的值，伺服器上的 PHP 程式碼讀取該 $_POST 物件，並且判斷什麼資訊已經被傳送到伺服器。

可以透過你所傳送的鍵（ HTML 元素的名稱 ）從這個陣列裡取回資訊，這將在你的 PHP 指令稿裡回傳對應的值。

1. 將值寫到畫面上。
2. 使用 POST 方法將資料傳送到 PHP 檔案時自動建立的陣列名稱。
3. 原本從表單收集資料的 HTML 元素的名稱。

SQL 的 select 讀取資料庫的資料

要從資料庫讀取資料，我們使用 select 陳述式，而且資料藉由 resultset 返回， resultset 是你的 select 查詢所要求之全部資料的集合，使用 select 陳述式也能夠結合（ join ）幾個資料表，因此你可以藉由同一個 resultset 取得來自多個資料表的資料。

1. select 關鍵字開始此陳述式。
2. 想擷取資料的資料欄清單（ 以逗號分隔 ）。
3. from 關鍵字指名資料欄清單結束，以及要從哪裡取得資料。
4. 指名要從哪些資料表擷取資料。
5. order by 關鍵字後面接著一或多個資料欄名稱，依照我們指名的順序排序回傳的資料。
6. asc 關鍵字告訴 order by 如何排序結果， asc 代表 ascending （ 上升 ）； dec 代表 decending （ 下降 ）。

SQL 的 select 陳述式從一或多張資料表擷取資料欄的資料，並且以 resultset 回傳結果。

select 怎麼怎麼限制要擷取的資料列？

能透過 where 子句限制要擷取的資料列，也能輕易地在 where 子句中增加過濾條件，僅擷取符合你限制條件的結果。

JSON

JSON （ JavaScript Object Notation 中譯 JavaScript 物件表達式 ），是一種輕量級的資料交換格式，它奠基於一種用來定義 JavaScript 之標準的子集合，並且是語言獨立的，在傳輸資料上比 XML 更有效率，且奠基於名／值對，就像關聯陣列一樣， JSON 裡的值可以是字串、數字、陣列、物件、布林值或 null 。

要存取 JSON 物件裡的資訊，可以使用你對任何其他物件所採用的相同表達式：點號（ . ）表達式， JSON 物件裡的陣列就像其他的 JavaScript 陣列，並具有相同的內容特性，像是 length ，不同的 JSON 物件會有不同的結構，因此你可能不需要用那麼多點號就能夠存取陣列物件的內容。

jQuery + JSON

jQuery 針對 JSON 資料的擷取建立了特別的快捷模式： getJSON 方法。

1. 要從哪載入資料的 URL 。
2. 執行這個回呼函式。
3. 回傳的資料在名為 json 的物件裡。

看起來就跟擷取表單資料的 post 方法幾乎相同， getJSON 方法是 ajax 方法的快捷模式，附帶幾個已經幫你設定好的參數。

PHP 的規則

要幫助你處理好 jQuery 資料所需的 PHP 規矩其實並不多，當中很多只是語法而已。

PHP 基礎

1. 所有 PHP 程式碼都必須包裹在 <?php 與 ?> 標籤。
2. 你可以將 PHP 散佈在 HTML 中，只需使用第一點的方法就好。
3. 每一行 PHP 程式碼都必須以分號（ ; ）結束。

<div><span> Hello
<?php
    echo "Bob";
?>
</span></div>

變數的規則

1. 全部變數都必須從錢號（ $ ）開始。
2. 在那之後，它們必須包含至少一個字母或下劃線，接著是字母、數字或下劃線的任何組合。
3. 破折號（ - ）、空白（ ）和全部特殊字元（ 除了 $ 和 _ ）均不允許作為變數名稱。

<?php
    $u = "USA";
    $home_country = "Ireland";
    $another-var = "Canada";
?>

迴圈的規則

1. PHP 也包含 for 、 while 及 do...while 迴圈，語法皆與 JavaScript 相同。
2. PHP 還包含額外的迴圈機制，稱為 foreach 迴圈，那會一個個地遍歷陣列裡的全部元素，使用 as 關鍵字直到它到達陣列末端，然後自動停止。

<?php
    for ($i = 1; $i <= 10; $i++) {
        echo $i;
    }
    while ($j <= 10) {
        echo $j++;
    }
    $a = array(1, 2, 3, 17);
    foreach ($a as $v) {
        echo "Current value: $v.\n";
    }
?>

陣列的規則

1. 你能夠使用 array 關鍵字建立新陣列，類似 JavaScript 。
2. 你能夠使用項目的索引（ 在 方括號[] 中 ）存取陣列值，而且它們也是從零開始索引的，，就像 JavaScript 一樣。
3. 陣列也可以是關聯的，這表示你能夠使用鍵存取陣列裡的項目，而不是索引，這些被稱作鍵／值對。
4. 要將值指定給關鍵陣列的鍵，使用 => 運算子。

<?php
    $my_arr2 = array('USA', 'Canada', 'China');
    echo $my_arr2[2]; // Prints China

    $arr = array("foo" => "bar", 12 => true);
    echo $arr["foo"]; // Prints bar
    echo $arr[12]; // Prints true
?>

條件的規則

1. if 陳述式的語言跟 JavaScript 相同， else 及 else if 子句也一樣。
2. 比較運算子全都跟 JavaScript 相同。
3. 邏輯運算子也跟 JavaScript 相同，再加上一些具有描述性的文字 and 、 or 以及 not 能夠用來代替那些運算子。

<?php
    if ($x > $y) {
        echo "x is greater than y";
    }
    else if ($x == $y) {
        echo "x is equal to y";
    }
    else {
        echo "x is smaller than y";
    }
?>

輸出到畫面的規則

1. 關鍵字 echo 和 print 將訊息寫到畫面。
2. 可以使用 print_r 命令寫出陣列內容。

<?php
    echo "Bob";
    print_r($my_arr2);
?>

用 PHP 格式化輸出

PHP 裡的 json_encode 函式能將關聯陣列轉換成 JSON 編碼的值字串。

json_encode 函式從 PHP 版本 5.2 才開始提供。

1. 將值寫到瀏覽器或 Ajax 呼叫等。
2. 呼叫 PHP 函式 json_encode ，將陣列編碼成 JSON 格式。
3. 傳遞要編碼的陣列。

在能夠編碼前，它必須在單一關聯陣列中，上面已經看過繞行 resultset 的方法，我們需要一種能將這些陣列中的每一個合併成單一個的辦法，而使用 PHP 函式的 array_push ，我們能夠把新項目增加到陣列末端。

1. 建立新的空陣列。
2. 傳遞目標陣列作為第一個參數。
3. 要被增加到陣列裡的名／值對。
4. 傳遞你想要增加到陣列的任何資訊，在此案例中，另一個關聯陣列被增加到 $my_array 陣列。

參考資料

1. 深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）
2. 從前端傳資料給後端（GET, POST）、從 PHP 連線到 MySQL 資料庫