Question

我想在HTML中嵌入JSON。我找到的最优雅的解决方案是使用script - 代码和mime媒体类型application/json。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

这是嵌入JSON的标准方式吗？如果没有，上述解决方案是否有任何风险？

使用内联JSON（而不是JSON-P服务）的原因：

少量JSON数据
减少HTTP请求
对HTML属性中的数据进行内联JSON的优先选择

[更新] 嵌入json的原因。

我有一个流量非常高的网站的图库小部件。画廊可以包含100张或更多图像。我一次只显示一个图像，其余图像将延迟加载。但是，所有图像的信息（图像src）将在页面加载的html中呈现。有各种方法在html中呈现图像信息。我可以使用html数据属性，而不是使用JSON，如下所示：

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

将导致：

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

上述解决方案的缺点是额外的标记。我宁愿使用JSON和Javascript-Templating引擎，例如doT.js。

Answer 1

我正在回答我自己的问题，因为我必须找到解决方案。我的解决方案基于 Bergi 建议使用内联JSONP。这比找到我的实际问题的答案更好，因为不需要手动JSON解析。

JSON数据（和HTML）是使用Java Server Pages（JSP）生成的。

第1步

使用JSP创建自定义变量名称。它将用作将json数据分配到的javascript全局变量。该名称是随机生成的，以防止在同一页面上发生命名冲突。

<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

第2步 script标记有一个cssClassname来标识它和data-var - 属性，以便可以确定自定义变量名。 ${ctrl.json}是JSP并打印出JSON。与使用回调函数的JSONP不同，使用全局变量。到目前为止，我没有遇到任何弊端。

<script class="data" data-var="${jsonpVarName}" type="text/javascript">
    window.${jsonpVarName} = ${ctrl.json};
</script>

第3步 访问数据（使用jQuery）非常简单：

var data = window[$('script.data').data('var')];

上下文示例

<强> HTML

<div class="myWidget">
    <button class="fetchData">Fetch Data</button>


    <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

    <script class="data" data-var="${jsonpVarName}" type="text/javascript">
        window.${jsonpVarName} = ${ctrl.json};
    </script>

</div>

<强>的Javascript

$('button.fetchData', '.myWidget').click(function (e) {

    var data = window[$('script.data', '.myWidget').data('var')];    

});

我正在使用内联JSONP来加载页面加载所需的JSON数据。它不是很多数据，而是一个HTTP-Request少。

Answer 2

你的建议绝对正确。 type标记的script属性必须是有效的MIME描述符。根据{{3}}第6节“IANA注意事项”：

JSON文本的MIME媒体类型是application / json   输入名称：申请
  子类型名称：json

所以你的HTML有效：

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

而且，不，这样做没有其他风险。

Answer 3

使用内联JSON（而不是JSON-P服务）的原因

您也可以内联JSON-P。好的，您只需将该方法称为“内联脚本”，但它具有以下优点： - ）

Answer 4

尝试http://json2html.com/这是将JSON转换为HTML的好方法。

是否有在HTML中嵌入JSON的标准？

4 个答案: