可通过五种方法将PHP数组传给HTML/JS:一、内联JSON;二、AJAX接口;三、隐藏input/data属性;四、PHP生成JS变量;五、模板引擎注入。

如果您希望在 HTML 页面中使用 PHP 数组中的数据,但 HTML 本身无法直接解析 PHP 变量,则需要通过服务端输出或接口方式将 PHP 数组传递给前端 JavaScript。以下是几种可行的实现方法:
一、在 HTML 中内联输出 PHP 数组为 JSON 字符串
该方法利用 PHP 的 json_encode() 函数将数组转为 JSON 格式,并直接嵌入到 HTML 的 <script></script> 标签中,使 JavaScript 可以立即访问。
1、在 PHP 文件(如 index.php)中定义数组并输出到 script 标签内。
2、使用 json_encode($array, JSON_UNESCAPED_UNICODE) 确保中文不被转义。
立即学习“PHP免费学习笔记(深入)”;
3、在 script 标签中用 const data = ; 声明变量。
4、后续可在 JavaScript 中直接使用 data 变量读取数组内容。
二、通过 AJAX 请求 PHP 接口获取数组数据
该方法将 PHP 数组封装为独立接口(如 api.php),前端通过 fetch 或 XMLHttpRequest 异步请求该接口,接收 JSON 响应。
1、创建 api.php 文件,设置响应头 header(‘Content-Type: application/json; charset=utf-8′);。
2、在 api.php 中定义数组并调用 echo json_encode($arr, JSON_UNESCAPED_UNICODE); 输出。
3、在 HTML 页面中使用 fetch(‘api.php’) 发起 GET 请求。
4、调用 .then(response => response.json()) 解析返回的 JSON 数据。
5、在后续 .then(data => { … }) 中处理 PHP 数组值,例如遍历或渲染 DOM。
三、使用隐藏 input 或 data 属性预置数组数据
该方法适用于小型、静态、无需频繁更新的数组,将 PHP 数组序列化后写入 HTML 元素的属性中,再由 JavaScript 提取。
1、在 PHP 中对数组执行 json_encode() 并赋值给隐藏 input 的 value 属性。
2、HTML 中插入:php vue react javascript java html js 前端 json ajax app 工具 后端 php JavaScript json ajax html xss echo Array 关联数组 封装 const 全局变量 字符串 接口 JS function 对象 dom 异步 input