Question

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

这是使用handlebars.js加载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>

这是我的js文件（main.js）

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

     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;
    }`

这是我的json文件（medi-web.json）

     {
        "hospitals": [
        {
            "name": "Apollo Hospital",
            "ratings" : "four star",
            "images": "../resources/images/apollo.jpg"
        },

        {
            "name": "Amri Hospital",
            "ratings" : "two star",
            "images": "../resources/images/apollo.jpg"
        },

        {
            "name": "Fortis Hospital",
            "ratings" : "three star",
            "images": "../resources/images/apollo.jpg"
        }
        ]
    }

这些总是显示连接错误，但为什么我不知道请帮助我如何解决？这些是使用handlebars.js加载json文件和脚本的代码但不知道为什么我的代码没有加载json文件。

Answer 1

由于安全原因，没有服务器时不会加载本地文件。

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

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

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

为什么没有加载json？

1 个答案: