将 JSON 存储在 HTML 属性中的最佳方式？

Question

我需要将一个 JSON 对象放入 HTML 元素的属性中。

1. HTML 不必验证。

_Quentin 回答： 将 JSON 存储在 data-* 属性 中，这是有效的 HTML5。_

1. JSON 对象可以是任何大小——即巨大

Maiku Mori 回答： HTML 属性的限制可能是 65536 个字符。

1. 如果 JSON 包含特殊字符怎么办？例如 {foo: '<"bar/>'}

Quentin 回答：按照通常的约定，在将 JSON 字符串放入属性之前对其进行编码。 对于 PHP，使用 htmlentities() 函数。

---

编辑 - 使用 PHP 和 jQuery 的示例解决方案

将 JSON 写入 HTML 属性：

 <?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

使用 jQuery 检索 JSON：

 $('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

原文由 BadHorsie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 不必验证。

为什么不？验证是非常简单的 QA，可以发现很多错误。使用 HTML 5 data-* 属性。

JSON 对象可以是任意大小（即巨大）。

我还没有看到任何关于浏览器对属性大小的限制的文档。

如果确实遇到它们，则将数据存储在 <script> 中。定义一个对象并将元素 id 映射到该对象中的属性名称。

如果 JSON 包含特殊字符怎么办？ （例如 {test: ‘<“myString/>’}）

只需遵循在属性值中包含不受信任的数据的正常规则。使用 & 和 " （如果你用双引号括起属性值）或 ' （如果你用单引号括起属性值） .

但是请注意，这不是 JSON（它要求属性名称是字符串并且字符串只能用双引号分隔）。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Another way you can do it – is put json data inside <script> tag, but not with type="text/javascript" , but with type="text/bootstrap" or type="text/json" type , 以避免 javascript 执行。

然后，在你程序的某个地方，你可以这样请求它：

 function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  }
}

在服务器端，你可以做这样的事情（这个例子用 php 和 twig ）：

 <script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

原文由 Sergey Kamardin 发布，翻译遵循 CC BY-SA 3.0 许可协议