最推荐方式是用 json_encode() 将 PHP 数组转 JSON 字符串后嵌入 script 标签；其次可用 data-* 属性传简单数据；禁用 print_r、手动拼接或 serialize 等不安全方式。
PHP 把数组传递给 JavaScript，本质是把 PHP 数据“转成 JS 能识别的格式”，再嵌入到 HTML/JS 环境中。最常用、最安全的方式是用 json_encode() 将 PHP 数组转为 JSON 字符串，然后在前端 JS 中直接解析或直接赋值使用。
用 json_encode() 输出到内联 script 标签
这是最推荐、兼容性最好、也最不容易出错的方法：
- PHP 中确保数组是合法结构（关联数组 → JS 对象，索引数组 → JS 数组）
- 调用
json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG)避免中文乱码和 XSS 风险 - 输出时用
<script></script>标签包裹，并加上type="application/json"或直接赋值给 JS 变量
示例：
$data = ['name' => '张三', 'age' => 28, 'hobbies' => ['读书', '游泳']];
?>
<script><br> const phpData = <?php echo json_encode($data, JSON_UNESCAPED_UNICODE); ?>;<br> console.log(phpData.name); // 张三<br> </script>
通过 data-* 属性传简单数组（适合轻量、静态数据）
适用于单个字符串、数字或短小的一维数组，避免 script 注入风险，但不适合复杂嵌套结构：
- 对数组先
json_encode()，再用htmlspecialchars()转义后写入data-xxx - JS 用
dataset.xxx获取，再JSON.parse()还原
示例：
'>>
<script><br> const el = document.getElementById('my-container');<br> const config = JSON.parse(el.dataset.config);<br> </script>
$data = ['status' => 'success', 'list' => [['id'=>1,'title'=>'新闻1']]];
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>
.then(res => res.json())
.then(data => console.log(data.list));
<script><br> const el = document.getElementById('my-container');<br> const config = JSON.parse(el.dataset.config);<br> </script>
通过 AJAX 异步获取（适合动态、大量或需权限控制的数据）
当数据需要按需加载、或涉及用户权限、数据库查询时，应走接口方式：
- PHP 写一个返回 JSON 的接口（如
api/data.php），设置header('Content-Type: application/json') - JS 用
fetch()或Axios请求，得到响应后直接使用 - 注意处理跨域（CORS）、错误状态、空响应等边界情况
示例（PHP 接口）：
header('Content-Type: application/json; charset=utf-8');$data = ['status' => 'success', 'list' => [['id'=>1,'title'=>'新闻1']]];
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>
JS 端：
fetch('api/data.php').then(res => res.json())
.then(data => console.log(data.list));
不推荐的做法（容易出问题）
以下方式看似简单，但存在安全隐患或兼容性问题，应避免：
- 直接
echoPHP 数组（如<script>var a = <?php print_r($arr); ?></script>）→ 输出不可解析，且有 XSS 风险 - 手动拼接 JS 对象字符串（如
"{name:'$name'}"）→ 单引号/双引号/特殊字符极易破坏语法 - 用
serialize()或var_export()→ JS 无法识别，且非标准数据交换格式
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
