PHP向JS传递配置的核心方式是通过HTML内联JSON数据，即在<script>标签中用json_encode()输出window.APP_CONFIG对象；其次可用data-属性传少量字符串配置；大配置或需权限校验时则通过AJAX异步加载。
PHP 把配置项传递给 JS，核心思路是：在 HTML 页面中“注入”数据，让 JS 能安全、可靠地读取。不能直接在 JS 文件里写 PHP 代码（除非用 .php 后缀并设置正确 Content-Type），最常用且推荐的方式是通过 <script> 标签内联 JSON 数据。
用 <script> 写入全局 JS 变量
在 PHP 模板（如 index.php）的 <head> 或 <body> 底部，输出一个带配置的 JS 对象：
<script>
window.APP_CONFIG = <?php echo json_encode([
'apiUrl' => 'https://api.example.com',
'debug' => true,
'timeout' => 5000,
'features' => ['darkMode', 'notifications']
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
</script>
然后任意 JS 文件或内联脚本中就能直接使用：
console.log(APP_CONFIG.apiUrl); // https://api.example.com
if (APP_CONFIG.debug) { /* 开发调试逻辑 */ }
✅ 安全：json_encode() 自动转义，防 XSS；
✅ 简单：无需额外请求，首屏即得；
✅ 兼容：所有浏览器都支持。
用 data- 属性传少量关键配置
适合只传一两个值（比如用户 ID、页面类型），且希望语义化、可被 HTML 解析器识别：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
立即学习“PHP免费学习笔记（深入）”；
<body data-api-url="<?php echo htmlspecialchars($config['apiUrl'], ENT_QUOTES, 'UTF-8'); ?>"
data-user-id="<?php echo (int)$user_id; ?>">
JS 中读取：
const body = document.body; const apiUrl = body.dataset.apiUrl; const userId = body.dataset.userId;
⚠️ 注意：dataset 只支持字符串，数字/布尔需手动转换；
✅ 轻量、无侵入，适合 SSR 场景下与前端框架协同。
通过 AJAX 异步加载配置（按需）
如果配置较大、或需权限校验、或内容动态变化（如多语言包），可单独提供 PHP 接口：
// config.php
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'locale' => $_SESSION['lang'] ?? 'zh-CN',
'menu' => get_user_menu($_SESSION['uid']),
], JSON_UNESCAPED_UNICODE);
JS 中用 fetch 加载：
fetch('/config.php')
.then(res => res.json())
.then(config => {
window.APP_CONFIG = config;
initApp();
});
✅ 灵活、可缓存、便于服务端控制；
⚠️ 增加请求延迟，需处理加载状态和失败重试。
避免常见错误
-
不要在 .js 文件里写 PHP：纯静态 JS 文件不会被 PHP 解析，
<?php echo ... ?>会原样暴露在前端，造成信息泄露或语法错误； -
别用
echo "拼接 JS 字符串：易出引号冲突、未转义 XSS 漏洞，必须用json_encode()处理数据； - 不推荐用 cookie 存配置：大小限制、每次请求携带、安全性低，仅适合极简状态（如 theme=dark）；
-
注意字符编码：确保 PHP 输出 UTF-8，HTML 声明
<meta charset="utf-8">，避免中文乱码。
