PHP 與 JavaScript 互相調用完全指南：6 大場景實戰代碼詳解

核心原理

PHP 運行於伺服端，JavaScript 運行於瀏覽器端。兩者「互相調用」本質是：PHP 動態生成 JS 代碼輸出到 HTML，或 JS 發起 HTTP 請求獲取 PHP 輸出。無直接函數級調用。

六大經典場景與代碼範本

場景 1：JS 以 <script src="b.php"> 載入 PHP 生成的 JS 變量

<!-- a.html -->
<script src="b.php?action=test"></script>
<script>alert(jstext);</script>

<?php // b.php
$action = $_GET['action'];
header('Content-Type: application/javascript');
echo "var jstext = '" . addslashes($action) . "';";

關鍵：PHP 輸出合法 JS 語句，瀏覽器當作腳本執行。

場景 2：PHP 內嵌 JS 變量值（模板插值）

<?php $url = 'https://example.com'; ?>
<script>
var ds = "";
alert(ds);
</script>

注意：必須對變量做 addslashes() 或 json_encode() 防 XSS 與語法錯誤。

場景 3：PHP 輸出 <script> 呼叫前端已定義函數

<?php
// 條件成立時輸出調用代碼
if ($needAlert) {
    echo '<script>showAlert(' . json_encode($msg) . ');</script>';
}
?>

場景 4：JS 透過隱藏表單欄位讀取 PHP 變量

<?php $userId = 100; ?>
<input type="hidden" id="userId" value="<?php echo $userId; ?>">
<script>
var userId = document.getElementById('userId').value;
console.log(userId);
</script>

場景 5：JS 發起 AJAX 請求 PHP 介面（現代標準做法）

// 前端
fetch('api.php?action=getData')
  .then(r => r.json())
  .then(data => console.log(data));

<?php // api.php
header('Content-Type: application/json');
echo json_encode(['status' => 'ok', 'data' => ['a' => 1]]);
?>

場景 6：PHP 直接輸出完整 JS 函數定義供前端複用

<?php
echo <<