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 页面的 标签中，使 JS 可直接访问全局变量。
1、在 PHP 文件中定义数组并编码输出：
php
$data = [‘name’ => ‘Alice’, ‘age’ => 30, ‘city’ => ‘Beijing’];
echo ‘var phpArray = ‘ . json_encode($data) . ‘;’;
?>
2、在后续的 JavaScript 中直接使用该变量：
console.log(phpArray.name); // 输出：Alice
立即学习“PHP免费学习笔记（深入）”；
3、确保 PHP 输出前未发送任何 HTTP 头信息，且 json_encode() 的第三个参数（JSON_UNESCAPED_UNICODE）可选启用以保留中文字符原样。
二、通过 AJAX 请求获取 JSON 接口响应
该方法将 PHP 数组封装为独立接口的响应体，JS 使用 fetch 或 XMLHttpRequest 异步获取，适用于前后端分离或动态加载场景。
1、创建一个单独的 PHP 文件（如 data.php），仅输出 JSON：
<?php
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 属性的容器：
<div id="data-container" data-php-array=' 1, ‘b’ => 2]), ENT_QUOTES, ‘UTF-8′); ?>’>
微信扫一扫 
支付宝扫一扫 
