JS如何读取PHP数组数据详解

本文深入解析了在前端 JavaScript 中安全、高效读取 PHP 后端数组数据的五种主流方法——包括 JSON 编码嵌入内联脚本、AJAX 异步请求 JSON 接口、DOM data 属性注入、type="application/json" 的 script 标签承载，以及隐藏 input 元素传递，不仅阐明每种方式的技术原理与典型代码实现，更强调关键细节如响应头设置、中文编码处理、CORS 风险规避和 XSS 防护要点，帮助开发者根据项目架构（如是否前后端分离、是否需动态加载）精准选型，打通 PHP 与 JS 之间可靠的数据桥梁。

如果您在前端 JavaScript 中需要读取 PHP 后端封装的数组数据，则必须通过 HTTP 请求将 PHP 生成的结构化数据传递至浏览器环境。PHP 无法直接将变量暴露给 JS 执行上下文，需借助输出机制完成数据桥接。以下是实现该目标的多种可行方法：

一、通过 JSON 编码输出至内联脚本

该方法利用 PHP 的 json_encode() 将数组转为 JSON 字符串，并嵌入 HTML 页面的

1、在 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 属性的容器：