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

在一次采访中，我不得不通过javascript读取json文件

json文件大致如下所示：

{ apple: {price: 1}, banana: {price: 2} }

我有一些解决方案，如：

借助ajax方法阅读

修改json文件，如“var json={apple:{price:1}，banana:{price:2}}”，并像javascript文件一样将其加载到HTML中，这样我就可以将其作为全局变量读取

然而，当我问面试官时，他给了我一些提示：

使用脚本标记将json文件加载到html，如下所示：

{ apple: {price: 1}, banana: {price: 2} }

script type=“application/json”src=“scripts/data.json”

然后通过

eval（json）

---

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

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

---

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

您不能这样做：

这可能是面试官提出的一个骗人的问题吗

在我看来，使用ajax是唯一正确的方法。其他解决方案属于黑客类

---

另外，正如Franco所提到的，不要使用eval（），除非您必须支持非常旧的浏览器并且不关心安全性。改为使用JSON.parse（）。它甚至得到IE8的支持。调用EVA评估/执行它的参数-所以这是一个攻击向量，试图将恶意代码注入到你的站点。p> 你可能对问题的细节记忆犹新

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

第二部分可能与JSONP有关，在JSONP中修改服务器输出，使其看起来更像

function（）

，函数名由客户端提供给服务器（尽管这实际上是特定于实现的）。几年前，JSONP曾是一种常见的模式（主要用于不支持XHR的浏览器的向后兼容性解决方案，但也用于绕过跨域限制）。现在可能会少很多，因为它有一些重大的安全问题。如果您想了解更多信息：

---

然而，JSONP不涉及使用

eval

，但有同样的安全问题：一切正常。

我相信OP希望通过脚本标记加载JSON文件。谢谢您的回答。我想$.getJSON只是ajax方法之一？让我困惑的不是怎么做，而是面试官的意思是，如何只通过一个脚本标记而不修改json文件本身？我完全同意eval是一种糟糕的做法…@Henrik He sad采访者给了他暗示，但我仍然认为这是从给定的json文件获取数据的最好和安全的方法。@Franco-我100%同意。但问题的答案是这是不可能的。只有ajax或修改JSON文件（基本上将其转换为JavaScript文件）才能工作。如果他想使用脚本标记，唯一的选择是通过JSON数组进行迭代。for（json数组中的var键）{}。这种方法需要使用一些php来读取文件：$string=file_get_contents（json array.json'）；谢谢你的回答。我在stackoverflow上读过类似的问题，但我没有发现与面试官所说的有任何相似之处，所以我发布了这个问题。。。。。。稍后我可能会问他，很可能他错了。那不是JSON。通过JSONP运行它还具有内容类型

application/javascript

而不是

application/json

。使用

application/json

将停止浏览器执行它。@Quentin，这可能是一个细节，我怀疑是否有浏览器真的在意，他们的解释可能基于这样一个事实，即他们通过

标记（无论内容类型如何，他们都会将其解释为Javascript）获得的数据而不是内容类型本身。@jcaron-当它是指定它的

类型

属性时，他们总是关心，就像在本例中一样。他们查看属性，认识到它不是一种他们可以执行的脚本语言，然后根本不需要为它发出HTTP请求。@Quentin，不知道你的意思。您刚才讨论的是

内容类型（我想是HTTP头），现在讨论的是
类型属性（我想是
标记的）。@jcaron-类型属性告诉浏览器希望从服务器获得什么类型的内容。内容类型HTTP头告诉它内容实际上是什么。它们是相同的东西，但这是您在回答中使用的
type
属性。