JavaScript 呼叫 PHP 程式：透過 URL 參數傳遞互動資料

概念

JavaScript 運行於瀏覽器（客戶端），PHP 運行於伺服器。兩者透過 **HTTP 請求** 互動：JS 導向帶參數的 PHP 網址，PHP 處理後輸出結果（HTML/JSON/純文字），JS 再決定如何呈現。

範例：確認對話框導向不同處理頁

HTML + JavaScript (index.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS 呼叫 PHP 範例</title></head><body>
<script>
function func() {
    if (confirm("Are you OK with this?")) {
        location.href = "ok.php?action=ok";
    } else {
        location.href = "ok.php?action=cancel";
    }
}
</script>

<a href="#" onclick="func(); return false;">請點擊這裡</a>
</body></html>

PHP 處理頁 (ok.php)

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

$action = $_GET['action'] ?? '';
if ($action === 'ok') {
    echo "I'm OK!";
} else {
    echo "I'm not OK!";
}
?>

進階：AJAX 非同步呼叫（不跳轉頁面）

<script>
function callPhpAsync(action) {
    fetch('ok.php?action=' + encodeURIComponent(action))
        .then(r => r.text())
        .then(txt => {
            document.getElementById('result').textContent = txt;
        });
}
</script>

<button onclick="callPhpAsync('ok')">確定</button>
<button onclick="callPhpAsync('cancel')">取消</button>
<div id="result"></div>

關鍵點總結

• JS 使用 location.href 或 fetch()/XMLHttpRequest 發起請求。
• 參數透過 **Query String** (?key=val) 傳遞，PHP 用 $_GET 接收。
• 敏感操作請改用 **POST** + CSRF Token，並驗證 $_SERVER['REQUEST_METHOD']。
• PHP 輸出前設定 header('Content-Type: ...')，避免編碼亂碼。
• 現代開發建議回傳 **JSON** 格式，前端統一解析，錯誤碼與資料分離。