尝试将 json 文件直接加载到 HTML 中并通过 javascript 读取其内容

Posted 2023-03-05

【中文标题】尝试将 json 文件直接加载到 HTML 中并通过 javascript 读取其内容

【英文标题】：Try to load json file directly into HTML and read its contents by javascript

【发布时间】：2016-03-10 17:58:46

【问题描述】：

我在面试时不得不通过 javascript 读取一个 json 文件。

json文件差不多是这样的：

 apple: price: 1, banana: price: 2 

我有一些解决方案，例如：

借助ajax方法阅读 修改 json 文件，如 "var json= apple: price: 1,banana: price: 2 " 并将其加载到 html 中，就像 javascript 文件一样，所以我可以将其作为全局变量读取

但是当我问面试官时，他给了我提示：

使用这样的脚本标签将 json 文件加载到 html：

script type="application/json" src="scripts/data.json"

然后通过eval(json)读取你的js文件中的数据

我很困惑：我怎么能通过将数据加载为脚本标签而不进行修改来访问数据？

【问题讨论】：

那不是 JSON。运行它通过jsonlint.com

【参考方案1】：

您将需要获取 json 文件（假设您希望通过单击按钮来获取它）：

$(document).ready(function()
    $("button").click(function()
        $.getJSON("your-json.js", function(result)
            $.each(result, function(i, val)
                //you can do something with your returned data.
            );
        );
    );
);

注意：不要使用 eval()，这是一种不好的做法。

【讨论】：

我相信 OP 想通过脚本标签加载 JSON 文件。

感谢您的回答。我想 $.getJSON 只是 ajax 方法之一？让我困惑的不是怎么做，而是面试官的意思，如何只通过脚本标签而不修改json文件本身来做？我完全同意 eval 是一种不好的做法......

@Henrik 他很难过面试官给了他提示，但我仍然认为这是从给定的 json 文件中获取数据的最佳和安全的方法。

@Franco - 我同意 100%。但这个问题的答案是不可能的。只有 ajax 或修改 JSON 文件（基本上将其转换为 JavaScript 文件）才有效。

如果他想使用脚本标签，唯一的选择是遍历 json 数组。 for( var key in json-array ) 。这种方法涉及使用一些 php 来读取文件： $string = file_get_contents(json-array.json');

【参考方案2】：

你不能这样做：

HTML/Javascript: how to access JSON data loaded in a script tag with src set

这可能是面试官的一个诡计问题..？

使用 ajax，这是我认为唯一正确的方法。其他解决方案属于 hack 类别。

另外，正如 Franco 所说，不要使用 eval()，除非您必须支持非常旧的浏览器并且不关心安全性。请改用 JSON.parse()。它甚至被 IE8 支持。调用 eval 会评估/执行它的参数 - 所以这是试图将恶意代码注入您的站点的人的攻击媒介。

【讨论】：

感谢您的回答。我在***上阅读过类似的问题，但我没有找到与面试官所说的相似的东西，所以我发布了这个问题......我稍后可能会问他，可能他错了。

【参考方案3】：

你可能对问题的细节有不好的回忆。

显然，问题的第一部分涉及Ajax（XmlHttpRequest）。

第二部分可能与 JSONP 有关，您可以在其中修改服务器输出，使其看起来更像function(<json data here>)，函数名称由客户端提供给服务器（尽管这实际上是特定于实现的）。几年前，JSONP 曾经是一种常见的模式（主要是作为不支持 XHR 的浏览器的向后兼容解决方案，但也可以绕过跨域限制）。这些天可能要少得多，因为它有一些重大的安全问题。如果您想了解更多信息：https://en.wikipedia.org/wiki/JSONP

然而，JSONP 不涉及eval 的使用，但有同样类型的安全问题：任何事情都会发生。

【讨论】：

JSONP 也有内容类型application/javascript 而不是application/json。使用application/json 将停止浏览器执行它。

@Quentin，这可能是一个细节，我怀疑是否有浏览器真正关心，他们的解释可能基于他们通过<script> 标签获得的数据这一事实（他们会解释为 Javascript 无论如何Content-Type) 而不是 Content-Type 本身。

@jcaron — 他们总是关心何时是 type 属性指定它，就像在这种情况下一样。他们查看属性，认识到它不是他们可以执行的脚本语言，然后根本不费心为它发出 HTTP 请求。

@Quentin，不确定你的意思。你说的是Content-Type（我想是HTTP标头），现在你说的是type属性（我想是<script>标签）。

@jcaron — type 属性告诉浏览器期望从服务器获得什么类型的内容。 content-type HTTP 标头告诉它内容实际上是什么。它们是相同的，但它是您在答案中使用的 type 属性。