您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。

这个技巧对我很有用(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):)

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

既然你有一个web应用程序，你可能有一个客户端和一个服务器。

如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，这意味着您只有客户端。出于安全原因，浏览器不应该允许您这样做。

然而，正如lauhub上面解释的那样，这似乎是有效的:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

另一个解决方案是在你机器的某个地方设置一个web服务器(在windows中很小，在linux中很小)，并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。

如果你能运行本地web服务器(就像Chris P上面建议的那样)，如果你能使用jQuery，你可以试试http://api.jquery.com/jQuery.getJSON/

您可以使用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获取数据。

要使用javascript读取外部本地JSON文件(data. JSON)，首先要创建数据。json文件:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

然后,

在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);

有关更多信息，请参阅此参考资料。

正如许多人之前提到的，使用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);
});