JSON 實戰：PHP 數組與 JavaScript 數組互轉完整指南

核心概念：JSON 作為數據交換橋樑

JSON (JavaScript Object Notation) 是輕量級數據交換格式，基於 JavaScript 子集，JS 原生支持解析。PHP 5.2+ 內置 json_encode() 和 json_decode() 函數，完美解決 PHP 數組與 JS 數組/對象互不識別的跨語言數據傳輸問題。

JSON 兩種核心結構

1. 對象 - 鍵值對集合

{"username": "Eric", "age": 23, "sex": "man"}

JS 訪問：obj.username、obj.age

2. 數組 - 有序值集合

["Eric", 23, "man"]

JS 訪問：arr[0]、arr[1]

PHP 數組轉 JSON 核心規則

關鍵陷阱：PHP 數組鍵混合數字和字符串時，json_encode() 強制輸出對象，導致 JS 無法用數字索引訪問（如 obj.0 無效）。最佳實踐：保持數組純索引或純關聯，避免混合。

實戰場景：AJAX 傳輸 PHP 數組給 JS

後端 PHP (api.php)

<?php
header('Content-Type: application/json; charset=utf-8');

// 模擬數據源
$users = [
    ['id' => 1, 'name' => '張三', 'email' => 'zhang@example.com'],
    ['id' => 2, 'name' => '李四', 'email' => 'li@example.com'],
    ['id' => 3, 'name' => '王五', 'email' => 'wang@example.com']
];

// 直接輸出 JSON 數組（推薦做法）
echo json_encode($users, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

// 輸出結果：
// [{"id":1,"name":"張三","email":"zhang@example.com"},{"id":2,"name":"李四","email":"li@example.com"},{"id":3,"name":"王五","email":"wang@example.com"}]
?>

前端 JS (原生 Fetch API)

// 現代瀏覽器推薦使用 Fetch API
fetch('api.php')
    .then(response => response.json()) // 自動解析 JSON
    .then(users => {
        // users 已是 JS 數組對象
        users.forEach(user => {
            console.log(`${user.id}: ${user.name} - ${user.email}`);
            // 動態生成 DOM
            const div = document.createElement('div');
            div.textContent = `${user.name} (${user.email})`;
            document.body.appendChild(div);
        });
    })
    .catch(error => console.error('請求失敗:', error));

前端 JS (jQuery 兼容舊項目)

$.getJSON('api.php', function(users) {
    $.each(users, function(index, user) {
        console.log(user.name); // 直接訪問對象屬性
        $('#user-list').append(`<li>${user.name}</li>`);
    });
});

進階技巧與常見問題

1. 中文 Unicode 轉義控制

// 默認輸出 \uXXXX 格式
json_encode(['name' => '中文']); // {"name":"\u4e2d\u6587"}

// 使用 JSON_UNESCAPED_UNICODE 保持可讀
json_encode(['name' => '中文'], JSON_UNESCAPED_UNICODE); // {"name":"中文"}

2. 強制輸出數組格式

$arr = ['a' => 1, 'b' => 2];
// 默認輸出對象：{"a":1,"b":2}

// 強制數組索引重建
echo json_encode(array_values($arr)); // [1,2]

// 或 PHP 7.3+ JSON_FORCE_OBJECT 反向控制
echo json_encode($arr, JSON_FORCE_OBJECT); // 強制對象

3. 深度限制與錯誤處理

// 遞歸深度超過 512 會報錯
json_encode($deepArray, JSON_THROW_ON_ERROR); // PHP 7.3+ 拋出異常

// 自定義深度（需手動實現或使用第三方庫）

4. JSON 解碼為關聯數組

$json = '{"name":"張三","age":25}';

// 第二參數 true 返回關聯數組（推薦）
$arr = json_decode($json, true); 
// ['name' => '張三', 'age' => 25]

// 默認返回 stdClass 對象
$obj = json_decode($json);
echo $obj->name; // 張三

完整交互流程圖解

PHP 端                          網絡傳輸                      JS 端
┌─────────────┐                 ┌──────────┐                 ┌─────────────┐
│ PHP 數組/對象 │ ──json_encode()─▶ │ JSON 字符串 │ ──HTTP 響應──▶ │ JSON.parse() │
└─────────────┘                 └──────────┘                 └─────────────┘
                                                                │
                                                                ▼
                                                         ┌─────────────┐
                                                         │ JS 數組/對象 │
                                                         └─────────────┘

總結

JSON 是 PHP 後端與前端 JS 交互的標準橋樑。掌握 json_encode() 輸出控制（數組 vs 對象、中文處理）、json_decode() 解碼選項、以及現代 Fetch/jQuery 異步獲取流程，是全棧開發必備技能。避免手動拼接 JSON 字符串，始終使用內置函數確保格式合法、編碼正確、安全可靠。