如何将数据从PHP传输到JavaScript：完整指南及示例

如何将数据从PHP传输到JavaScript：常见问题与解答

您是否曾经编写过PHP脚本，从数据库生成了一个数据数组，然后惊恐地发现同一页面上的JavaScript代码对此一无所知？很熟悉的情况。PHP在服务器上运行，JavaScript在用户的浏览器中运行。这是两个不同的世界，被时间和空间分隔开来。但如何让它们协同工作呢？如何将变量和数据从PHP传输到JavaScript？

这个话题是Stack Overflow上最热门的问题之一（有数万次浏览！）。这并非没有原因：服务器端和客户端代码之间的交互是任何Web开发人员的基本技能。在本文中，我们将从简单到高级，介绍5种经过验证的将数据从PHP传输到JavaScript的方法。开始吧！

为什么PHP和JavaScript不能直接通信？

在深入代码之前，让我们先了解一下架构。当用户请求一个页面时，会发生以下情况：

\n
1. 服务器执行PHP脚本。
\n
2. PHP生成HTML（并可以在其中插入JavaScript）。
\n
3. 服务器将准备好的HTML代码发送到浏览器。
\n
4. 浏览器渲染页面并执行JavaScript。
\n

关键点：PHP在JavaScript看到页面之前执行。因此，将变量从PHP传输到JavaScript只能在HTML生成阶段进行。JavaScript不能在页面加载后“请求”PHP的数据（为此有AJAX，但那是另一个话题）。

方法1：将PHP直接嵌入JavaScript（最简单）

最直接的方法是将PHP变量直接输出到由服务器生成的JavaScript代码中。示例：

<?php\n$userName = "阿列克谢";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("你好，" + name + "！你" + age + "岁了。");\n</script>\n

能用吗？能。美观吗？不太美观。缺点很明显：

\n
• 代码变得混乱且难以阅读。
\n
• 如果变量中包含引号或HTML标签，会导致JavaScript语法错误。
\n
• 安全性？别想了：XSS攻击会感谢你。
\n

这种方法只适用于没有特殊字符的简单字符串（例如，记录ID或页码）。对于其他所有情况，请使用以下方法。

方法2：JSON——数据传输之王

JSON（JavaScript对象表示法）是服务器和客户端之间数据交换的标准格式。PHP可以使用一个函数json_encode()将任何数组或对象转换为JSON。反过来，JavaScript可以轻松解析JSON。

示例：将用户数组从PHP传输到JavaScript。

<?php\n$users = [\n    ['name' => '伊万', 'age' => 25],\n    ['name' => '玛丽亚', 'age' => 30],\n    ['name' => '彼得', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "伊万"\n    console.log(users.length); // 3\n</script>\n

为什么这很酷？

\n
• 安全：json_encode()会自动转义特殊字符。
\n
• 通用：可以传输字符串、数字、数组、对象、布尔值。
\n
• 整洁：代码易于阅读和维护。
\n

唯一的细微差别是数据直接嵌入到页面的HTML代码中。如果数据很多，页面会变得更重。但对于大多数任务来说，这是最佳选择。

方法3：HTML data-属性（通过DOM传输）

有时需要传输与页面上特定元素相关的数据。例如