Javascript 为什么不加载json？

这是我的html文件（index.html）

这是用于加载json文件和使用handlebar.js编写脚本的代码 但是不知道为什么这段代码没有加载json文件

      <div class="container">
                <div class="jumbotron">
                        <div class="page-wrap">
                        <div id="data-container"></div>
                    </div>
                </div>
        </div>

    <script id="dataTemplate" type="text/x-handlebars-template">
         {{#each hospitals}}
          <h2>{{name}}</h2>
         {{/each}}
        </script>
        <script src="../js/handlebars-v4.0.5.js"></script>
        <script src="../js/main.js"></script>

     var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','file:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-web.json');
    ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            // This is where we'll do something with the retrieved data
            var data = JSON.parse(ourRequest.responseText);
            createHTML(data);
        } else {
            console.log("We connected to the server, but it returned an error.");
        }
    };

    ourRequest.onerror = function() {
        console.log("Connection error");
    };
    ourRequest.send();

    function createHTML(hospitalData) {
        var rawTemplate = document.getElementById("dataTemplate").innerHTML;
        var compileTemplate = Handlebars.compile(rawTemplate);
        var ourGeneratedHTML = compileTemplate(hospitalData);
        var dataContainer = document.getElementById("data-container");
        dataContainer.innerHTML = ourGeneratedHTML;
    }`

xhr.open("GET", "http://www.example.org/example.json");
xhr.open("GET", "http://127.0.0.1/example.json");

这些总是显示连接错误，但为什么我不知道请帮助我如何解决？这些代码用于加载json文件和使用

handlebar.js

---

但是我不知道为什么我的代码没有加载json文件。

由于安全原因，本地文件在没有服务器的情况下不会加载

      <div class="container">
                <div class="jumbotron">
                        <div class="page-wrap">
                        <div id="data-container"></div>
                    </div>
                </div>
        </div>

    <script id="dataTemplate" type="text/x-handlebars-template">
         {{#each hospitals}}
          <h2>{{name}}</h2>
         {{/each}}
        </script>
        <script src="../js/handlebars-v4.0.5.js"></script>
        <script src="../js/main.js"></script>

     var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','file:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-web.json');
    ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            // This is where we'll do something with the retrieved data
            var data = JSON.parse(ourRequest.responseText);
            createHTML(data);
        } else {
            console.log("We connected to the server, but it returned an error.");
        }
    };

    ourRequest.onerror = function() {
        console.log("Connection error");
    };
    ourRequest.send();

    function createHTML(hospitalData) {
        var rawTemplate = document.getElementById("dataTemplate").innerHTML;
        var compileTemplate = Handlebars.compile(rawTemplate);
        var ourGeneratedHTML = compileTemplate(hospitalData);
        var dataContainer = document.getElementById("data-container");
        dataContainer.innerHTML = ourGeneratedHTML;
    }`

xhr.open("GET", "http://www.example.org/example.json");
xhr.open("GET", "http://127.0.0.1/example.json");

许多旧浏览器可能支持加载本地json文件

      <div class="container">
                <div class="jumbotron">
                        <div class="page-wrap">
                        <div id="data-container"></div>
                    </div>
                </div>
        </div>

    <script id="dataTemplate" type="text/x-handlebars-template">
         {{#each hospitals}}
          <h2>{{name}}</h2>
         {{/each}}
        </script>
        <script src="../js/handlebars-v4.0.5.js"></script>
        <script src="../js/main.js"></script>

     var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','file:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-web.json');
    ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            // This is where we'll do something with the retrieved data
            var data = JSON.parse(ourRequest.responseText);
            createHTML(data);
        } else {
            console.log("We connected to the server, but it returned an error.");
        }
    };

    ourRequest.onerror = function() {
        console.log("Connection error");
    };
    ourRequest.send();

    function createHTML(hospitalData) {
        var rawTemplate = document.getElementById("dataTemplate").innerHTML;
        var compileTemplate = Handlebars.compile(rawTemplate);
        var ourGeneratedHTML = compileTemplate(hospitalData);
        var dataContainer = document.getElementById("data-container");
        dataContainer.innerHTML = ourGeneratedHTML;
    }`

xhr.open("GET", "http://www.example.org/example.json");
xhr.open("GET", "http://127.0.0.1/example.json");

您必须将文件放在本地服务器（如Apache）下，然后尝试使用ajax加载json文件

      <div class="container">
                <div class="jumbotron">
                        <div class="page-wrap">
                        <div id="data-container"></div>
                    </div>
                </div>
        </div>

    <script id="dataTemplate" type="text/x-handlebars-template">
         {{#each hospitals}}
          <h2>{{name}}</h2>
         {{/each}}
        </script>
        <script src="../js/handlebars-v4.0.5.js"></script>
        <script src="../js/main.js"></script>

     var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','file:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-web.json');
    ourRequest.onload = function() {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            // This is where we'll do something with the retrieved data
            var data = JSON.parse(ourRequest.responseText);
            createHTML(data);
        } else {
            console.log("We connected to the server, but it returned an error.");
        }
    };

    ourRequest.onerror = function() {
        console.log("Connection error");
    };
    ourRequest.send();

    function createHTML(hospitalData) {
        var rawTemplate = document.getElementById("dataTemplate").innerHTML;
        var compileTemplate = Handlebars.compile(rawTemplate);
        var ourGeneratedHTML = compileTemplate(hospitalData);
        var dataContainer = document.getElementById("data-container");
        dataContainer.innerHTML = ourGeneratedHTML;
    }`

xhr.open("GET", "http://www.example.org/example.json");
xhr.open("GET", "http://127.0.0.1/example.json");

---

我假设问题在于链接：

file://...

文件：//

相当于跨域调用，这是不允许的（默认情况下）。如果您想在本地PC上进行开发，那么是否可以设置web服务器并使用`？是否检查了发生的特定错误的详细信息？看看浏览器控制台。是的。这是错误。无法加载XMLHttpRequestfile:///C:/Users/SUBHAJIT/Desktop/Workspace/Medi-Web/WebContent/js/medi-Web.json。跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome扩展资源。