靜態 HTML 頁面調用 PHP 的三種實戰方案：JS、jQuery Load 與 AJAX

為什麼靜態頁無法直接執行 PHP？

Web 伺服器（Apache/Nginx）預設僅對 .php 副檔名啟用 PHP 解析器。.html 檔案會直接作為靜態內容輸出，不會經過 PHP 引擎。若要在 HTML 中動態載入 PHP 執行結果，必須透過**客戶端技術**發起額外請求。

方案一：<script src="xxx.php"> 模式（傳統、簡單）

利用瀏覽器載入 JS 檔案的特性，實際請求 PHP，由 PHP 輸出 JavaScript 程式碼（如 document.write()）回傳給瀏覽器執行。

範例：a.html 呼叫 b.php

<!-- a.html -->
<script type="text/javascript" src="b.php?action=test"></script>

<?php
// b.php
$action = $_GET['action'] ?? '';
// 輸出 JS 程式碼，注意雙引號轉義
echo "document.write('$action');\n";
?>

執行流程：瀏覽器解析 HTML → 遇到 <script src> → 請求 b.php?action=test → PHP 輸出 document.write('test'); → 瀏覽器執行該 JS → 頁面顯示 "test"。

缺點：僅能輸出純文字/HTML 片段，難以處理複雜 DOM 操作；需注意輸出內容的 JS 語法安全（單引號、換行轉義）。

方案二：jQuery .load() 載入片段（最常用、支援參數傳遞）

jQuery 的 load(url, data, callback) 可發起 GET/POST 請求，將回傳的 HTML 片段直接插入指定 DOM 元素。

基本用法

<div id="myID">載入中...</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 1. 載入無參數 PHP
$("#myID").load("test.php");

// 2. 單一參數（自動轉為 GET 字串 ?name=Adam）
$("#myID").load("test.php", {"name": "Adam"});

// 3. 多參數（逗號分隔，jQuery 內部轉為 &name=Adam&site=xxx）
$("#myID").load("test.php", {"name": "Adam", "site": "www.example.com"});

// 4. 陣列參數（PHP 端以 $_GET['myinfo'] 接收陣列）
$("#myID").load("test.php", {'myinfo[]': ["Adam", "www.example.com"]});
</script>

PHP 端接收範例 (test.php)

<?php
// 1. 無參數
// 2. $_GET['name'] = 'Adam'
// 3. $_GET['name']='Adam', $_GET['site']='www.example.com'
// 4. $_GET['myinfo'] = ['Adam', 'www.example.com']

echo "<p>伺服器時間：" . date('Y-m-d H:i:s') . "</p>";
echo "<p>收到參數：" . htmlspecialchars(json_encode($_REQUEST)) . "</p>";
?>

進階：POST 請求與回調處理

<script>
// 明確使用 POST
$("#myID").load("api.php", {token: "abc123", act: "refresh"}, function(response, status, xhr) {
    if (status === "error") {
        console.error("載入失敗：", xhr.status, xhr.statusText);
        $("#myID").html("<span class='error'>資料載入失敗，請重試</span>");
    }
});
</script>

方案三：原生 fetch() / XMLHttpRequest（現代、無依賴）

不想引入 jQuery 時，可使用瀏覽器原生 API，靈活度最高。

使用 fetch()（推薦）

<div id="result"></div>
<script>
async function loadPhpContent() {
    try {
        const res = await fetch('api.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: new URLSearchParams({action: 'getData', id: 123})
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const html = await res.text();
        document.getElementById('result').innerHTML = html;
    } catch (e) {
        console.error(e);
        document.getElementById('result').textContent = '載入失敗';
    }
}
loadPhpContent();
</script>

PHP 端回傳 JSON（前後端分離常用模式）

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

$action = $_POST['action'] ?? $_GET['action'] ?? '';
$id     = (int)($_POST['id'] ?? $_GET['id'] ?? 0);

$data = [
    'code' => 200,
    'msg'  => 'success',
    'data' => [
        'id'   => $id,
        'time' => date('c'),
        'info' => "處理動作：$action"
    ]
];
echo json_encode($data);
?>

三種方案對比表

安全與效能提醒

• 輸出編碼：PHP 輸出 HTML 片段時，務必對動態資料用 htmlspecialchars() 防 XSS。
• CSRF 保護：涉及寫入操作的 API 必須驗證 Token。
• 快取控制：動態內容加 header('Cache-Control: no-store, must-revalidate'); 避免瀏覽器快取舊資料。
• 錯誤處理：前端務必處理網路失敗、HTTP 非 2xx、PHP 例外等情境，給使用者友善提示。

結語

靜態 HTML 調用 PHP 的本質是「客戶端發起第二次 HTTP 請求」。專案若已使用 jQuery，.load() 是最快上手的方案；現代專案建議改用 fetch() 搭配 JSON API，實現前後端分離，維護性與擴展性更佳。