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

Question

我想在HTML中嵌入JSON.我发现的最优雅的解决方案是使用script-tag和mime媒体类型application/json.

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

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

使用内联JSON(而不是JSON-P服务)的原因:

• 少量的JSON数据
• 减少HTTP请求
• 对HTML属性中的数据进行inline-JSON的首选项

[更新]嵌入json的原因.

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

<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的模板引擎如doT.js.

Answer 1

你的建议是完全正确的。标签的type属性script必须是有效的 MIME 描述符。根据官方 JSON RFC第 6 节“IANA 注意事项”：

JSON 文本的 MIME 媒体类型是 application/json。
类型名称：应用程序
子类型名称：json

所以你的 HTML 是有效的：

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

而且，不，这样做没有额外的风险。

Answer 2

因为我必须找到解决方案，所以我正在回答自己的问题。我的解决方案基于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-attribute，以便可以确定定制变量名。${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> 

Java脚本

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

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

});

我正在使用内联JSONP来加载页面加载时所需的JSON数据。它的数据量不大，少了一个HTTP请求。

Answer 3

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

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