Question

我正在尝试读取本地.JSON文件并使用JSON.parse将其放入Javascript数组中。任何其他示例代码也会有所帮助。我无法使用以下代码执行此操作，无法加载本地文件。

var xmlhttp = new XMLHttpRequest();
//xmlhttp.overrideMimeType("application/json"); //this line also didnt help
var url = "sample.json";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        testme(xmlhttp.responseText);
    }
};
xmlhttp.send(); 

function testme(response){

    var record = JSON.parse(response);
    var out = "<table>";

    for(var i = 0; i < record.length; i++) { //prints all the data to html
        out += "<tr><td>" +
        record[i].Name +
        "</td><td>" +
        record[i].City +
        "</td><td>" +
        record[i].Country +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("dis").innerHTML = out;
}

发生以下错误

XMLHttpRequest无法加载file：/// C：/Practice/CMPE%20273%20refresher/json/Sample.json。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource.transmit1 @ JSON.js：36transmit @ JSON.js：41onclick @ jsonweb.html:11

JSON.js：36 Uncaught NetworkError：无法在'XMLHttpRequest'上执行'send'：无法加载'file：/// C：/Practice/CMPE%20273%20refresher/json/Sample.json'。< / p>

Answer 1

您正在使用file://协议运行脚本。您将无法使用此协议执行该请求。您需要安装http服务器才能执行请求（即使它是您计算机中的所有内容）。

有许多lightweight个http服务器可供选择，或者您可以安装nodejs或xampp / wampp服务器。

Answer 2

嘿，你的网址不正确。请参考

xmlhttp.open（＆＃34; GET＆＃34;，url，true）;

指定请求的类型，URL以及是否应异步处理请求。

method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)

Answer 3

如果您使用的是兼容的HTML5浏览器，则可以使用FileReader API 见https://stackoverflow.com/a/40946430/2476389

JSON使用JavaScript读取本地文件（类似的问题，堆栈溢出没有帮助）

3 个答案: