如何在没有 Web 请求或 Web 服务器的情况下解析 JSON 文件？

Question

希望构建以下解决方法。

$.getJSON('myfile.json', function (data) {
    showAll(data);
});

我想避免使用网络服务器，但只想直接访问文件。

getJSON 使用网络请求，出现错误：XMLHttpRequest cannot load file:///Users/me/Documents/project/myfile.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

我想要一个解决方法。我已经阅读了有关重命名为 .js 然后只是从 HTML 文件中链接它的内容。有什么想法吗？

Answer 1

简单、快速，但不适合实际项目解决方案：

1. 将 myfile.json 重命名为 data.js（名称无关紧要）。
2. 在 data.js 中创建一个变量并用你的 json 初始化它 var myData = {...your json...}
3. 将<script src="./data.js"></script> 添加到您的 html 文件中。
4. 现在您可以将 javascript 中的 myData 变量用于所有数据。

这个解决方案很糟糕，因为你在全局范围内添加了一个新变量，浏览器仍然会发出一个 http 请求来获取这个 .js 文件。

另外，如果您想向本地文件发出 ajax 请求，您可以使用 http 服务器。看看很简单的node js http-server.

Answer 2

这将是一个 3 步过程。

将 JSON 文件与其他网页一起移动到文件夹中

在 JSON 文件中，为对象命名，即var data = {...};

在您想使用它的文件中，只需使用 <script src='myJSON.js'></script> 调用它

Answer 3

如果是静态 JSON 资源，为什么要再次发出网络请求。网络很贵。您可以更改为 .js 并将该文件包含在页面中。

Answer 4

如果你有正确的权限，你可以使用<script>标签获取文件。

在 html 中：

<script src="./favs.js"></script>
<script src="./script.js"></script>

在favs.js:

var favs = [
    { url: 'http://google.com' },
    { url: 'http://stackoverflow.com' }
];

在script.js:

console.log(favs); // you can use favs as global variables

否则，如果你想使用 $.getJSON() 这样的 ajax 调用，你应该有一个网络服务器。

---

另外，您可以动态加载js文件。请问您可以使用下面的代码，例如：

function loadScript(path, onload) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = path;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
  if(onload) s.onload = onload;
}

Answer 5

AJAX 是关于发出异步 HTTP 请求的。您需要一个 Web 服务器来发出这些请求并接收这些响应。 JQuery 的.get() 方法不会让您避开网络服务器。

我能想到的唯一方法是在代码中包含 iframe，并将 iframe 的源设置为包含 JSON 的资源。然后，您可以在 iframe 的内容上使用JSON.parse()。