javascript - 我应该使用 <script> 标签将数据从 PHP 传递到 JavaScript 吗?

标签 javascript json script-tag

已接受的答案 "How to pass variables and data from PHP to JavaScript?"列出了一些方法。 "How can I read a JSON in the script-tag from JavaScript?" 中讨论了未明确提及的一个(尽管它适合方法 2)。 。它通过使用 PHP 函数来工作(复制自 Mathias Bynens )

json_encode($data, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES)

写入标签的内容,例如

<script id="data" type="application/json">{org: 10, items:["one","two"]}</script>

(从 the answerc-smile 复制),然后通过 JavaScript 从 DOM 读取。

这似乎是适合我的情况的最佳方法(我宁愿不进行单独的 AJAX 调用),但我有点担心它似乎不是执行这些操作的标准方法。是否存在我应该注意的潜在安全问题?

这可能是合理的面向 future 的吗? <script>是否有可能发生变化?标签或浏览器处理的方式 type="application/json"这会打破这种方法吗?

<小时/>

更新

以下是该方法的示例:

<html>
<head>
<script id="data" type="application/json">
<?php 
$data = array(
    "org" => 10,
    "items" => array("one", "two"),
    "backslash" => "\\",
    "slash" => "/",
    "single quote" => "'",
    "double quote" => "\"",
    "close tag" => "</script>"
);
echo json_encode($data, JSON_HEX_TAG);
?>
</script>
</head>
<body>
<script>
var data = JSON.parse(document.getElementById("data").innerHTML);

for(var key in data) {
    if(data.hasOwnProperty(key)) {
        var p = document.createElement("pre");
        document.getElementsByTagName("body")[0].appendChild(p);
        p.appendChild(document.createTextNode(data[key].toString()));
    }
}
</script>
</body>
</html>

最佳答案

您可以使用变量:

在你的 php 中:

<?php
$data = array(
    "org" => 10,
    "items" => array("one", "two"),
    "backslash" => "\\",
    "slash" => "/",
    "single quote" => "'",
    "double quote" => "\"",
    "close tag" => "</script>"
);
?>

在你的html中:

<script>
    var data = <?php echo json_encode($data); ?>
</script>

您可以通过以下方式调用数据:

JSON.parse(data);

关于javascript - 我应该使用 &lt;script&gt; 标签将数据从 PHP 传递到 JavaScript 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40376812/

相关文章:

javascript - 将鼠标悬停在 slideToggle(2 个 div)上

python - 使用Bash工具解析JSON

java - 无法将 JSONObjects 添加到数组中

javascript - 将 Java 日期字符串转换为 javascript 日期

html - 带有和不带有 runat=server 属性的脚本标签有什么区别

javascript - 在 ReactJS 中集成 sharethis

asp.net - 如何判断 JavaScript 文件是否已包含在 ASP.NET 页面中?

javascript - Qt下载属性支持

javascript - 在 AngularJS 中设置和检索 $routeParams 中的自定义对象

javascript - 如何发送表单数据并在同一页面中使用ajax动态显示