22

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

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

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

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

  • 少量 JSON 数据
  • 更少的 HTTP 请求
  • 内联 JSON 优先于 HTML 属性中的数据

[更新]嵌入 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。

4

4 回答 4

8

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

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

所以你的 HTML 是有效的：

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

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

于 2014-01-09T14:15:54.813 回答
5

我正在回答我自己的问题，因为我必须找到解决方案。我的解决方案是基于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>

Javascript

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

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

});

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

于 2013-01-25T14:49:25.627 回答
2

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

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

于 2013-01-18T10:12:42.080 回答
0

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

于 2013-01-18T09:48:47.980 回答