你可以像ES6模块一样导入它;

import data from "/Users/Documents/workspace/test.json"

您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。

一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。

为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:

http://api.jquery.com/jQuery.getJSON/

我接受了斯塔诺精彩的回答，并把它包装成一个承诺。如果你没有像node或webpack这样的选项来从文件系统加载json文件，这可能会很有用:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

你可以这样调用它:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

正如许多人之前提到的，使用AJAX调用这是行不通的。然而，有一种方法可以绕过它。使用input元素，可以选择您的文件。

所选文件(.json)需要有这样的结构:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

然后你可以使用FileReader()使用JS读取文件:

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

您可以使用fetch()在async await的帮助下完成此操作。这是从url获取数据的最新和最安全的方式。

const url = "../asset/videoData.json";

const fetchJson = async () => {
  try {
    const data = await fetch(url);
    const response = await data.json();  
  } catch (error) {
    console.log(error);
  }
 };

你也可以使用它从外部url获取数据。

我已经阅读了上面的内容，并注意到通常在项目中有人想要加载多个json文件。在某些情况下是大量的，在某些情况下是“json文件目录”(否则你必须首先生成一个列表才能下载它们)。如果整个项目都是这样，就会变得很混乱。如果json文件中的数据之间有很多关系，这可能会很麻烦。

显然，这都可以用上面的方法来完成，要么把它们做成.js文件，要么通过某种本地抓取来检索它们。

然而，我发现一个有用的替代方案(如果你不想要一个有层次的服务器端解决方案)是首先在Sql Lite数据库中加载你所有的数据。这使得管理更多的数据也更容易一些，你只有一个文件，所有的数据等等。

然后使用web程序集加载sqlite数据库，然后使用常规查询查询数据客户端。这些都可以在客户端完成

下面是一个例子:https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts(被编译到客户端解决方案的typescript文件)。

在读/写站点中，你可以为每个用户提供一个sqlite数据库，这样你缓存的数据对于该用户是唯一的，等等。

裁判:https://github.com/sql-js/sql.js