PHP 與 JavaScript 變量交互實戰：模板渲染、AJAX、全局配置三大模式

PHP 服務端模板渲染時將變量傳給前端 JavaScript，是傳統 MVC 應用的核心模式。本文系統梳理**模板內聯輸出、JSON 配置物件、AJAX 異步獲取**三大模式，重點解決「陣列/物件序列化、XSS 防護、類型保真、CSP 兼容」等實戰難點。

模式一：模板內聯輸出 (傳統 SSR，首屏數據)

<?php
// Controller
$user = [
    'id' => 123,
    'name' => 'Alice & Bob', // 含特殊字符
    'roles' => ['admin', 'editor'],
    'settings' => (object)['theme' => 'dark', 'lang' => 'zh-CN'],
];
$initialState = [
    'user' => $user,
    'csrfToken' => bin2hex(random_bytes(32)),
    'apiBase' => 'https://api.example.com/v1',
];
require 'view.php';
?>




    
    
    
    
    


    
Loading...
    

前端讀取 (app.js)

// 解析初始狀態
const initialState = JSON.parse(document.getElementById('initial-state').textContent);
const { user, csrfToken, apiBase } = initialState;

console.log(user.name); // "Alice & Bob" (正確保留，未被轉義為實體)
// 直接可用於 Vue/React 初始化 store、React Query cache 等

為什麼不用內聯 ``？

• 需手動處理字串引號、換行、XSS，極易出錯。
• `json_encode` 內建完整轉義，`type="application/json"` 瀏覽器不執行，安全且符合 CSP `script-src 'self'` (無需 `unsafe-inline`)。
• 支援任意複雜結構 (陣列、物件、巢狀、null、布爾、數字)。

模式二：全局配置物件 (簡單標量、特性開關)

<?php
$config = [
    'env' => 'production',
    'debug' => false,
    'version' => '2.4.1',
    'features' => ['newDashboard' => true, 'betaApi' => false],
    'cdnUrl' => 'https://cdn.example.com',
];
?>

模式三：AJAX / Fetch 異步獲取 (非首屏、權限敏感、大數據)

<?php
// api/user.php
header('Content-Type: application/json; charset=UTF-8');
session_start();
if (empty($_SESSION['user_id'])) {
    http_response_code(401);
    echo json_encode(['error' => 'Unauthorized']);
    exit;
}
$user = getUserById($_SESSION['user_id']);
// 移除敏感字段
unset($user['password_hash'], $user['email_verified_at']);
echo json_encode($user, JSON_UNESCAPED_UNICODE);
?>

// 前端
async function fetchCurrentUser() {
    const resp = await fetch('/api/user.php', {
        credentials: 'include', // 攜帶 Cookie
        headers: { 'Accept': 'application/json' }
    });
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    return resp.json();
}

// 使用
const user = await fetchCurrentUser();

進階主題

1. 類型保真：PHP 數字 vs JS Number

PHP `int`/`float` → JSON number → JS `number` (IEEE 754 雙精度)。**大整數 (> 2^53-1) 會失去精度**。

<?php
$bigId = 1234567890123456789; // 超過 2^53
echo json_encode(['id' => $bigId]); // {"id":1234567890123456789} 但 JS 解析為 1234567890123456800

// 解決：大整數作為字串輸出
echo json_encode(['id' => (string)$bigId], JSON_UNESCAPED_UNICODE);
// {"id":"1234567890123456789"} -> JS 端用 BigInt 或字串比較
?>

2. 日期時間傳輸：ISO 8601 字串

<?php
$dt = new DateTimeImmutable('now', new DateTimeZone('UTC'));
echo json_encode(['created_at' => $dt->format(DateTime::ATOM)]);
// {"created_at":"2024-01-15T14:30:00+00:00"}
// JS 端: new Date(data.created_at) 直接解析
?>

3. CSP (Content Security Policy) 兼容

<?php
// 禁止 inline script，只允許外部文件
header("Content-Security-Policy: script-src 'self' https://cdn.example.com; object-src 'none'; base-uri 'self';");
// 模式一 的  違反 CSP，需改為：
// 1. 獨立文件 config.js.php 動態生成 (加快快取)
// 2. 或用  + JS 解析
?>

4. 雙向綁定表單：PHP 舊值回填 + JS 即時驗證

<form id="profile-form">
    
    
    保存
</form>

<script>
// JS 即時驗證
document.getElementById('profile-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const resp = await fetch('/api/profile.php', {
        method: 'POST',
        body: formData,
        credentials: 'include',
    });
    const result = await resp.json();
    if (result.errors) {
        Object.entries(result.errors).forEach(([field, msg]) => {
            document.querySelector(`[data-for="${field}"]`).textContent = msg;
        });
    } else {
        alert('保存成功');
    }
});
</script>

總結選型指南

場景	推薦模式	關鍵點
首屏渲染數據、SEO 內容、初始化 Store	模式一：` 上一篇文章： PHP date() 格式化字符完整對照表 (含 ISO 8601、RFC 2822、Unix 時間戳) 下一篇文章： FirePHP 實戰：在 Firebug/Firefox 開發者工具中調試 PHP 變量、堆棧、性能 PHP 相關知識 PHP 內核探索：Zval 結構、引用計數、寫時複製與垃圾回收機制 PHP 內核探索：Zval 結構深度解析 Zval (Zen CodeIgniter 通用分頁類：可配置樣式、多種導航模式完整實作 獨立於框架的分頁類，經 CodeIgniter 3 測試驗證 PHP.MVC 標籤系統：TagActionDispatcher 標籤行為調度機制詳解 TagActionDispatcher 是 PHP.MVC PHP vs Node.js 深度對比：從入門到架構選型的十輪大戰 PHP vs Node.js 深度對比：從入門到架構選型的十 Yii Framework 遷移工具 migrate 使用詳解與 Yii2 實戰構建後台登錄 PHP 遞歸刪除目錄與檔案：完整實作、邊界處理與安全強化指南 phpMyAdmin config.inc.php 核心配置參數詳細解析與最佳實踐 CodeIgniter 自定義路由實戰：打造優雅 RESTful 風格 URL Smarty 保留變數完整指南：$smarty 內建變數詳解 PHP 錯誤類型全景圖：從編譯期到運行期的完整分類與處理策略 PHP 設計模式入門：UML 類圖核心符號與關係詳細解讀 欄目導航 PHP 基礎 PHP 綜合知識 PHP 入門 PHP 相關知識 Copyright © 程式碼之家 All Rights Reserved