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。（{3}}：

创建的Ajax请求

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

...它会删除所有脚本标记，从而阻止使用：

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

我见过在HTML属性中传递JSON，我猜这是等价的 - 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/（数据是双向传递的，但是一个简单的外部样式会覆盖您的内联样式并显示内容 - 而不是提及对您的语义的影响文件）。

Answer 2

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

将JSON作为HTML元素文本传递

2 个答案: