Javascript 有在HTML中嵌入JSON的标准吗？

我想在HTML中嵌入JSON。我发现的最优雅的解决方案使用了

脚本

-标记和mime媒体类型

应用程序/json

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

{
“foo”：“bar”
}

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

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

• 少量JSON数据
• 更少的HTTP请求
• 对HTML属性中数据的内联JSON的首选项

[UPDATE]嵌入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模板引擎，例如

试试看，这是将JSON转换为HTML的好方法

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

---

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

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

JSON数据（和HTML）由Java服务器页面（JSP）生成

步骤1

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

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

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

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

上下文示例

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

    var data = window[$('script.data', '.myWidget').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> 

---

我使用内联JSONP加载页面加载所需的JSON数据。数据量不多，只需少一个HTTP请求。

您的建议绝对正确。

脚本

标记的

类型

属性必须是有效的MIME描述符。根据第6节“IANA注意事项”：

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

因此，您的HTML是有效的：

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

{
“foo”：“bar”
}

---

而且，不，这样做不会带来额外的风险。

您将如何处理“嵌入”的json？最好将json作为对象存储在javascript中。没有理由嵌入json，除非您想避免再次使用javascript访问json。json是一种传输数据的方法。它不是为了它自己而使用的东西。特别是在处理JavaScript时，实际上没有理由喜欢JSON（JavaScript对象表示法）而不是实际的JavaScript对象？或者您会提供预填充了嵌入式JSON的HTML文件吗？否则，我看不到直接在中嵌入JSON有什么好处HTML@PeeHaa：我更新我的问题是有原因的。这并没有回答我的问题。我相信mahmoud说的是，在需要时，使用json2html之类的模板引擎将JSON提要动态转换为html。那么就这样做吧。。在服务器页面加载期间，将JSON嵌入到一个漂亮的脚本标记中，然后使用json2html将图像（在需要时）转换为实际的“img”元素。您完全正确，但在使用JSON内联时，我不需要JSON-P。使用JavaScript对象文本，你a）不需要

JSON.parse

等b）可以使用

Date

对象和类似的非JSON东西c）可以直接附加库代码（而不是单独的

元素）d）不需要等待DOMready来提取JSONa）和b）有意义，尽管我只是接收纯文本数据，所以b）不用担心。你能解释一下吗？我不确定我是否理解正确？d） 没有问题，因为Javascript执行只在加载DOM时开始。我在回答中添加第一条注释时正在睡觉。不必使用JSON.parse是一个加号，如果我将JSON分配给一个全局变量（类似于JSON-P），我可以做到这一点。使用JSON-P使我的主要问题几乎无关紧要：-）请阅读可能的XSS向量。@TomMcKenzie是的，这是与任何用户生成的内容相关的风险。我假设OP生成了一个安全的

json

文件。

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