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

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

1. HTML不必验证。

   昆汀回答：将JSON存储在data-*有效HTML5 的attribute中。

2. JSON对象可以是任何大小-即巨大

   森·麦库（Maiku Mori）回答：HTML属性的限制可能为65536个字符。

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

   昆汀回答：按照常规惯例，将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);

});

HTML不必验证。

为什么不？验证真的很容易进行质量检查，它会捕获很多错误。使用HTML 5 data-*属性。

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

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

如果确实遇到了问题，则将数据存储在中<script>。定义一个对象，然后将ids 映射到该对象中的属性名称。

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

只需遵循将不可信数据包括在属性值中的常规规则即可。使用&和"（如果您将属性值用双引号引起来）或'（如果您将属性值用单引号引起来）。

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

根据你放的位置

• 在<div>您所要求的中，您需要确保JSON不包含可以开始标签，HTML注释，嵌入式doctype等的HTML特殊字符。您需要至少转义<，并且&原始字符不会出现在转义序列中。
• 在<script>元素中，您需要确保JSON不包含结束标记</script>或转义文本边界：<!--或-->。
• 在事件处理程序中，您需要确保JSON保留其含义，即使它具有看起来像HTML实体且不会破坏属性边界（"或'）的东西。

对于前两种情况（以及旧的JSON解析器），您应该对U + 2028和U + 2029进行编码，因为它们是JavaScript中的换行符，即使它们允许在未经JSON编码的字符串中使用。

为了正确起见，您需要转义\和JSON引号字符，并且始终对NUL进行编码永远不是一个坏主意。

如果未提供内容编码就提供HTML，则应进行编码+以防止UTF-7攻击。

无论如何，下面的转义表将起作用：

• NUL-> \u0000
• CR-> \n或\u000a
• LF-> \r或\u000d
• " -> \u0022
• & -> \u0026
• ' -> \u0027
• + -> \u002b
• /-> \/或\u002f
• < -> \u003c
• > -> \u003e
• \-> \\或\u005c
• U + 2028- >\u2028
• U + 2029-> \u2029

因此，结尾Hello, <World>!带有换行符的文本的JSON字符串值为"Hello, \u003cWorld\u003e!\r\n"。

您可以执行的另一种方法-将json数据放入<script>标记内，但不要使用type="text/javascript"，而应使用type="text/bootstrap"或type="text/json"类型，以避免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>

另一个选择是对JSON字符串进行base64编码，如果您需要在javascript中使用它，请使用atob()函数对其进行解码。

var data = JSON.parse(atob(base64EncodedJSON));

你可以使用knockoutjs，

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

基因敲除

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

输出量

名：Jayson姓：Monterroso

检查此：http : //learn.knockoutjs.com/

这里没什么好看的。从PHP开始，请提供JSON字符串htmlspecialchars以确保没有特殊字符可以解释为HTML。使用Javascript，无需转义；只需设置属性，您就可以开始了。

对于简单的JSON对象，下面的代码将起作用。

编码：

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

解码：

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

您可以做的是像这样在您的元素周围使用 cdata

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

其中mydata是原始的json字符串。希望这对您和其他人有帮助。

可以使用的另一种思路是将JSON数据作为base64字符串存储在属性中，然后使用window.atob或window.btoa将其还原为可用的JSON数据。

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>