JavaScript 與 PHP 互傳資料完整指南：前後端資料流通的四大橋樑

核心觀念：前後端分離的資料交換

JavaScript（瀏覽器端）與 PHP（伺服器端）運行在不同環境，資料交換必須透過 HTTP 協定。理解四種基本模式，即可掌握所有互傳場景：

模式 1：PHP → JavaScript（伺服器端渲染資料）

內嵌 Script 標籤（傳統、簡單）

<script>
    // 直接輸出 JS 變數
    const appConfig = {
        apiBase: '<?= htmlspecialchars($config['api_base'], ENT_QUOTES) ?>',
        userId: <?= (int)$user->id ?>,
        permissions: <?= json_encode($user->permissions) ?>,
        csrfToken: '<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>'
    };
</script>

注意：必須使用 htmlspecialchars(..., ENT_QUOTES) 防止 XSS，陣列/物件用 json_encode。

data-* 屬性（語意化、適合單一元素）

<div id="app" 
     data-user-id="<?= $user->id ?>"
     data-permissions="<?= htmlspecialchars(json_encode($user->permissions), ENT_QUOTES) ?>"
     data-csrf-token="<?= $csrfToken ?>">
</div>

<script>
    const app = document.getElementById('app');
    const userId = parseInt(app.dataset.userId, 10);
    const permissions = JSON.parse(app.dataset.permissions);
</script>

全域變數模式（大型應用常見）

<script>
    window.APP_INITIAL_STATE = <?= json_encode([
        'user' => $user->toArray(),
        'settings' => $settings,
        'translations' => $i18nMessages,
    ], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
</script>

JSON_HEX_* 旗標確保安全嵌入 HTML script 標籤中。

模式 2：JavaScript → PHP（前端送資料給後端）

傳統表單提交

<form action="/api/user/update" method="POST">
    <input type="hidden" name="_token" value="<?= csrf_token() ?>">
    <input type="text" name="name" value="<?= htmlspecialchars($user->name) ?>">
    <input type="email" name="email" value="<?= htmlspecialchars($user->email) ?>">
    <button type="submit">儲存</button>
</form>

PHP 接收：$_POST['name'], $_POST['email']

AJAX / Fetch API（現代標準）

// 純 JS Fetch
async function updateUser(userData) {
    const response = await fetch('/api/user/update', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        credentials: 'same-origin', // 攜帶 Cookie
        body: JSON.stringify(userData),
    });
    
    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || '更新失敗');
    }
    return response.json();
}

// 使用時
updateUser({ name: '新名字', email: 'new@example.com' })
    .then(data => console.log('成功:', data))
    .catch(err => console.error('失敗:', err));

PHP 接收 JSON 請求

$input = json_decode(file_get_contents('php://input'), true);
// 或使用框架封裝：$request->json()->all()

$name  = $input['name'] ?? null;
$email = $input['email'] ?? null;

// 驗證...
// 回應 JSON
header('Content-Type: application/json');
echo json_encode(['success' => true, 'data' => $user->toArray()]);

FormData 上傳檔案

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('name', '新名字');

fetch('/api/user/avatar', {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': csrfToken },
    credentials: 'same-origin',
    body: formData, // 別設 Content-Type，瀏覽器自動設定 multipart/form-data
});

模式 3：PHP → JavaScript（API 回應、動態資料）

JSON API 回應標準格式

// 成功回應
http_response_code(200);
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
    'success' => true,
    'data' => $user->toArray(),
    'meta' => ['timestamp' => microtime(true)],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

// 錯誤回應
http_response_code(422);
echo json_encode([
    'success' => false,
    'message' => '驗證失敗',
    'errors' => [
        'email' => ['Email 格式不正確'],
        'name' => ['名稱不可為空'],
    ],
], JSON_UNESCAPED_UNICODE);

資料表格/列表的伺服器端渲染片段

<?php // partials/user-row.php ?>
<tr data-user-id="<?= $user->id ?>">
    <td><?= htmlspecialchars($user->name) ?></td>
    <td><?= htmlspecialchars($user->email) ?></td>
    <td><?= $user->status_label ?></td>
    <td>
        <button class="btn-edit" data-action="edit">編輯</button>
        <button class="btn-delete" data-action="delete">刪除</button>
    </td>
</tr>

AJAX 回應 HTML 片段，前端直接 container.innerHTML = responseText 或 $(container).html(response)。

模式 4：JavaScript ↔ PHP 即時雙向通訊

Server-Sent Events (SSE)

<?php // sse.php ?>
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

while (true) {
    $data = getRealtimeData(); // 從 Redis/DB 獲取
    echo "data: " . json_encode($data) . "\n\n";
    ob_flush();
    flush();
    sleep(2);
    
    // 檢查客戶端是否斷開
    if (connection_aborted()) break;
}

// 前端
const eventSource = new EventSource('/sse.php');
eventSource.onmessage = (e) => {
    const data = JSON.parse(e.data);
    updateDashboard(data);
};
eventSource.onerror = () => eventSource.close();

WebSocket (Ratchet / Swoole / Laravel Echo)

// 使用 Laravel Echo + Pusher/Soketi
Echo.private('order.' . orderId)
    .listen('OrderStatusUpdated', (e) => {
        updateOrderStatus(e.order_id, e.status);
    });

安全性核心原則

編碼與格式最佳實踐

• 統一 UTF-8：資料庫、PHP、HTML、JS、JSON 皆為 UTF-8
• JSON 旗標：JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
• 日期時間：ISO 8601 格式（2024-01-15T10:30:00+08:00），前端用 new Date(isoString) 解析
• 數值精度：金額用整數（分）或字串傳輸，避免 JS float 精度問題

框架整合參考

前後端資料交換的本質是 序列化 → 傳輸 → 反序列化。掌握四大模式、嚴守編碼與安全原則、善用框架封裝，就能建立穩健、可維護的全端應用。記住：永遠不要信任來自客戶端的資料，伺服器端驗證是最後防線。

1. 上一篇文章： PHPDoc 註釋規範深度解析：從標籤語法到團隊協作最佳實踐
2. 下一篇文章： ExtJS 與 PHP 參數交互實戰：AJAX 請求、表單提交與 JSON 回應處理

PHP 相關知識

PHP AJAX 串接中國天氣網 API 打造無刷新即時天氣查詢模組

天氣資訊與日常生活息息相關，本文示範如何利用 PHP 做為中

PHPExcel 導出 MySQL 資料庫資料實戰：多工作表、瀏覽器下載、大資料優化

場景升級 上篇介紹靜態資料導出，本文實戰「從 MySQL 查

PHP ord() 與 chr() 函數深度解析：字符編碼轉換的核心橋梁

前言 在 PHP 字符編碼處理中，ord() 與 chr()

Laravel env() 函數讀取環境變數為 null 根因分析：config:cache 與環境變數載入機制

Laravel 環境變數讀取失效之謎：config:cach