您必须创建一个新的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);
 });

你可以使用XMLHttpRequest()方法:

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

您可以使用console.log语句(注释掉)查看myObj的响应。

如果你了解AngularJS，你可以使用$http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

如果文件在不同的文件夹中，请提到完整的路径而不是文件名。

将JSON文件转换为.js文件，并将JSON分配给一个变量或const，然后在你的主javascript文件中引用它。

上面提到的所有解决方案只有在本地主机上运行本地web服务器时才有效。如果你想要在没有web服务器的情况下实现这一点，你可能需要通过使用文件上传控制来手动上传JSON文件。由于安全风险，如果没有本地服务器，浏览器将不提供此功能。

你也可以在没有本地服务器的情况下解析上传的文件。这里是示例代码，我已经实现了一个解决类似的问题。

 <div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <h2>
        <pre id="output"></pre>
    </h2>
</div>
<script type="text/javascript">
    document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // your code to consume the json                    
            }
            fileReader.readAsText(this.files[0]);
        }) 
</script>

在我的情况下，我想读取一个本地JSON文件，并在桌面上的html文件中显示它，这就是我所要做的。

注意:不要尝试使用JavaScript自动上传文件，由于浏览器施加的安全限制，即使这样做也是不允许的。

如果你使用本地文件，为什么不把数据打包成一个js对象呢?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

没有xmlhttprequest，没有解析，只使用MyData。资源直接

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