通过 HTML 将复杂变量传递给 javascript 的正确方法答案

【问题标题】：Proper way to pass complex variables to javascript through HTML通过 HTML 将复杂变量传递给 javascript 的正确方法
【发布时间】：2025-12-18 23:00:01
【问题描述】：

我试图摆脱使用 PHP 的 htmlentities，这就是我停止的地方：

<?php
echo '<img ... onclick="MP.view(\''.$i->name.'\') />';
?>

但后来我想，与其进行替换和检查特殊字符，不如将整个对象 JSON 化。

<?php
echo '<img ... onclick="MP.view('.json_encode($i).') />';
?>

这提供了一个非常不受欢迎的结果，放入了大量的双引号。那么我该怎么做呢？我应该为每张图像分配一个数字唯一 id 并传递 id，然后从 JS 数组中查找其余数据吗？

【问题讨论】：

为什么不直接传递图片的 URL 来查看呢？了解MP.view 做了什么会有所帮助...
假设 MP.view 做了一些相当复杂的事情，其中图像的 URL 扮演的角色较小。基本上我需要传递大量数据

标签： php javascript html json

【解决方案1】：

在这种情况下正确的做法是：

 htmlspecialchars(json_encode($var), ENT_QUOTES, "UTF-8")

htmlspecialchars 将任何双引号转换为正确的 HTML 转义符，使生成的字符串适用于大多数属性。 ENT_QUOTES 参数也处理单引号；但您的示例中可能不需要它。

【讨论】：

那么接收函数会收到一个字符串，不是吗？
嗯，不。转义只是为了 HTML 属性的有效性。所以双引号不会与 DOM 结构冲突。但是你放在那里的 JSON 表达式仍然可以是一个对象。浏览器会小心地将原始 JSON/对象传递给您的回调函数。
完美。这允许我在传递的对象中添加额外的信息，这样函数就可以只接收一个参数
您不需要传递 UTF-8，因为 htmlspecialchars 不会触及非 ascii 字符

【解决方案2】：

像这样传递数据需要更少的转义（和更少的字节）：

echo '<script>var myObj = '.json_encode($i).'</script>';

然后，您的代码可能看起来更像这样：

echo '<img ... onclick="MP.view(myObj)" />';

【讨论】：

在那种情况下还是最好使用 htmlspecialchars，对吧？
@Frank：我从来不需要它。不过，您可能希望将其包装在 CDATA 标记中。
@Mikhail：您也可以在循环中创建脚本。只需将索引添加到您正在创建的对象的名称中，然后在 onclick 处理程序中使用它。
@Mikahi：这只是一个例子。您可以轻松更改脚本内容以创建一个数组变量，然后从 onclick 处理程序中使用该数组。