如何将PHP数组数据传递至外部JavaScript文件？

方法1：全局变量传递（最直接高效） #

这是最简单的方案，适合页面加载时就需要用到数据的场景。在你的PHP页面里，先于外部JS文件引入的位置，把PHP数组转换成JSON格式并输出为全局JS变量：

<?php
// 你的现有数据库查询逻辑
$seats = array(); 
while ($statement->fetch()) { 
    $seats[] = $book; 
}
// 将PHP数组转为合法的JSON字符串
$bookedSeatsJson = json_encode($seats);
?>

<!-- 先输出全局变量，再引入外部JS -->
<script>
var bookedSeats = <?php echo $bookedSeatsJson; ?>;
</script>

<script src="your-external-script.js"></script>

然后在你的外部JS文件里，直接使用这个全局变量即可：

// 直接调用init，传入已预订座位数组
init(bookedSeats);

这个方案不需要额外请求，代码量少，适合大多数常规场景。

方法2：AJAX异步获取（适合动态加载场景） #

如果你的JS逻辑需要在页面加载后异步获取数据，或者不想用全局变量污染环境，可以用AJAX请求专门的PHP接口：

首先创建一个PHP接口文件（比如get-booked-seats.php），负责返回JSON格式的座位数据：

<?php
header('Content-Type: application/json');

// 数据库查询逻辑
$seats = array(); 
while ($statement->fetch()) { 
    $seats[] = $book; 
}

// 输出JSON数据
echo json_encode($seats);
?>

然后在外部JS文件里，用fetch API（或XMLHttpRequest）请求这个接口：

// 异步获取已预订座位数据
fetch('get-booked-seats.php')
  .then(response => response.json())
  .then(bookedSeats => {
    // 拿到数据后调用init
    init(bookedSeats);
  })
  .catch(error => console.error('获取座位数据失败:', error));

这个方案不会阻塞页面渲染，也避免了全局变量，适合复杂的前端交互场景。

方法3：HTML Data属性传递（优雅无全局变量） #

你还可以把数据存储在HTML元素的data-*属性中，再在JS里读取，这种方式更符合现代前端的最佳实践：

在PHP页面里：

<?php
$bookedSeatsJson = json_encode($seats);
?>

<!-- 将数据存储在body或指定容器的data属性中 -->
<body data-booked-seats="<?php echo htmlspecialchars($bookedSeatsJson); ?>">

然后在外部JS文件里读取并转换：

// 从data属性中读取数据并转为JS数组
const bookedSeats = JSON.parse(document.body.dataset.bookedSeats);
init(bookedSeats);

这个方案既不会创建全局变量，又能让数据和DOM元素关联，安全性和可读性都不错。

注意事项 #

• 务必用json_encode()转换PHP数组，它会自动处理成合法的JS数组格式，避免手动拼接字符串导致的语法错误。
• 如果使用HTML Data属性传递，记得用htmlspecialchars()转义特殊字符，防止XSS攻击或HTML解析异常。

内容的提问来源于stack exchange，提问作者Akila Ranasinghe