PHP数组传至前端JS需通过HTTP桥接，方法包括：一、JSON编码嵌入内联script；二、AJAX请求JSON接口；三、data属性注入；四、type="application/json" script标签；五、隐藏input传递。
如果
您在前端 JavaScript 中需要读取 PHP 后端封装的数组数据，则必须通过 HTTP 请求将 PHP 生成的结构化数据传递至浏览器环境。PHP 无法直接将变量暴露给 JS 执行上下文，需借助输出机制完成数据桥接。以下是实现该目标的多种可行方法：
一、通过 JSON 编码输出至内联脚本
该方法利用 PHP 的 json_encode() 将数组转为 JSON 字符串，并嵌入 HTML 页面的
1、在 PHP 文件中定义数组并编码输出：
php
$data = ['name' => 'Alice', 'age' => 30, 'city' => 'Beijing'];
echo '';
?>
2、在后续的 JavaScript 中直接使用该变量：
console.log(phpArray.name); // 输出：Alice
3、确保 PHP 输出前未发送任何 HTTP 头信息，且 json_encode() 的第三个参数（JSON_UNESCAPED_UNICODE）可选启用以保留中文字符原样。
二、通过 AJAX 请求获取 JSON 接口响应
该方法将 PHP 数组封装为独立接口的响应体，JS 使用 fetch 或 XMLHttpRequest 异步获取，适用于前后端分离或动态加载场景。
1、创建一个单独的 PHP 文件（如 data.php），仅输出 JSON：
header('Content-Type: application/json; charset=utf-8');
$arr = [10, 20, 30, 'status' => 'active'];
echo json_encode($arr);
?>
2、在 HTML 页面中使用 fetch 调用该接口：
fetch('data.php')
.then(response => response.json())
.then(data => console.log(data));
3、必须设置 Content-Type 响应头为 application/json，否则部分浏览器可能拒绝解析或触发 CORS 预检失败。
三、通过 DOM data 属性注入数组序列化值
该方法将 PHP 数组经 json_encode() 处理后写入 HTML 元素的自定义 data 属性，JS 通过 getElementById 或 querySelector 提取并解析。
1、在 HTML 中插入带 data 属性的容器：
2、JavaScript 获取并解析：
const container = document.getElementById('data-container');
const phpArray = JSON.parse(container.dataset.phpArray);
3、必须使用 htmlspecialchars() 对输出内容进行转义，防止 JSON 字符串中的单引号或双引号破坏 HTML 结构。
四、通过 script 标签 type="application/json" 方式嵌入
该方法将 JSON 数据置于 type 为 application/json 的 script 标签中，不执行但可被 JS 安全读取，避免内联脚本执行风险与 XSS 漏洞。
1、PHP 输出如下结构：
2、JS 读取并解析：
const script = document.getElementById('php-data');
const data = JSON.parse(script.textContent);
3、type 属性必须严格设为 application/json，浏览器不会执行其内容，保障安全性。
五、通过隐藏 input 元素传递 JSON 字符串
该方法适用于表单上下文或需与传统表单提交共存的场景，将 PHP 数组编码后写入隐藏输入框 value 属性。
1、PHP 输出隐藏域：
'>
2、JS 获取并解析：
const input = document.getElementById('php-array-input');
const arr = JSON.parse(input.value);
3、value 属性值必须使用 htmlspecialchars() 转义，否则含双引号或尖括号的 JSON 会导致 HTML 解析错误。
