2

像这样在 HTML 中传输 JSON 是否会产生不良后果：

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

假设 HTML 字符如在元素文本中<被转义？&lt;

JSON 可以被严格解析：

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

例如，在 try/catch 语句中。基本原理是当脚本标签被剥离而不执行时，允许在 Ajax 的 HTML 响应中传递 JSON。一个例子是使用 jQuery .load()特殊选择器语法发出的 Ajax 请求：

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

...它抛弃了所有脚本标签，从而阻止了使用：

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

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

4

2 回答 2

2

在 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>

（引用应该在服务器端完成，例如使用PHPhtmlspecialchars(...)或Pythoncgi.escape(..., True)）。

然后您可以通过多种方式之一获取数据，例如。使用jQuery 的.data()方法。

编辑：

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

于 2012-11-26T00:07:11.880 回答
0

那么为什么不简单地使用 .ajax() 函数，你只会得到带有 json 的字符串。然后你可以按照你的建议解析它。

于 2012-11-25T23:57:25.100 回答