ajax - 将 JSON 作为 HTML 元素文本传递

Question

像这样在 HTML 中传输 JSON 会产生不良后果吗:

<div id="json" style="display: none;">{"foo": "bar"}</div>

假设 HTML 字符如 <转义为 <在元素文本中？

可以严格解析 JSON:

var blah = $.parseJSON($('#json').html())

例如，在 try/catch 语句中。基本原理是在 Ajax 的 HTML 响应中启用 JSON 传递，当脚本标记被剥离且 不执行时。一个例子是使用 jQuery .load() special selector syntax 发出的 Ajax 请求。 :

$('#here').load('some.html #fragment')

...它会放弃所有脚本标签，从而阻止使用:

<script>var blah = {"foo":"bar"}</script>

我已经看到 JSON 在 HTML 属性中传递，我猜这是等效的 - w.r.t.怪异、安全性等 - 但由于所有额外的引号转义，可读性要差得多。

Answer 1

在 HTML 中传递 JS 数据的自然方式是通过 JavaScript 代码(如果是实际 JavaScript 代码的一部分，例如初始值/配置的情况)或通过 data- HTML5 属性(每当不需要 JS 代码时；总是当数据需要以某种方式附加到 DOM 元素时)。

在您的示例中，这可能是最好的:

<div id="json" style="display: none;"
    data-something="{&quot;foo&quot;:&quot;bar&quot;}">
</div>

但是重新组织您的数据以实际遵循 HTML 结构:

<div class="profile-container"
    data-profile="{&quot;name&quot;:&quot;John Doe&quot;,&quot;id&quot;:123}">
    ... profile 123 ...
</div>
<div class="profile-container"
    data-profile="{&quot;name&quot;:&quot;Jane Doe&quot;,&quot;id&quot;:321}">
    ... profile 321 ...
</div>

(引用应该在服务器端完成，例如使用 PHP's htmlspecialchars(...) 或 Python's cgi.escape(..., True) )。

然后您可以通过多种方式之一获取数据，例如:使用jQuery's .data() method .

编辑:

是的，您将 JSON 嵌入为 HTML 标签内容并使用 CSS 样式隐藏它的方法有问题。正如我所说，如果您想在 HTML 中传递数据，唯一的“最佳实践”方法是将其附加到 HTML 元素之一(无论如何您都会这样做，但是您使用 CSS 来隐藏它，而您可以使用现有解决方案来传递 JSON/数据，而不影响可能覆盖您的样式的客户端)。缺点之一的证据如下:http://jsfiddle.net/NY7Bs/ (数据以两种方式传递，但一种简单的外部样式会覆盖您的内联样式并显示内容 - 更不用说对文档语义的影响)。