Question

我正在学习将外部本地JSON文件读入javascript。我按照下面的链接

How to read an external local JSON file in Javascript

然而，我无法做到。我的C盘中有一个test.json，路径为“c：\\ test.json”。我认为我的程序是这样的：当本地json文件中的内容更新时，我的程序将警告json文件中的数据。我不知道我的计划有什么问题。希望有人可以帮助我。先感谢您。

nexus-staging

test.json

{ “笔记”：[ “S0”， “S5”， “S4”， “S3”， “S2”， “S1”]}

Answer 1

对于本地学习和测试，我强烈建议使用Firefox。这是一个很棒的浏览器，因为它在加载本地文件方面非常宽松。

例如，它可以使用xhr加载本地文件没问题。

请注意，您无法从本地系统加载任何文件...只是从您的HTML页面（相对）“foo / bar / data.json”“向前看”文件，而不是“C：/ data。 JSON”。

另一件需要考虑的事情是本地文件系统和http是两个完全不同的动物。当浏览器发出“http请求”时，它会假定一个标题，响应代码和数据将返回它。而在加载本地文件时，不存在标题或响应代码，因为“请求”只是加载原始数据的系统级消息。这些差异的一个指标是当您将文件从系统拖放到浏览器窗口时，您将使用http：//

看到file：/// vs。

希望这有帮助。

最后一件事。当您使用overrideMimeType（“application / json”）时，您要求浏览器将生成的响应解析为json，而不是文本。所以你可能想尝试只返回响应？

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
       if (rawFile.readyState === 4 && rawFile.status == "200") {
           // callback(rawFile.responseText);
           callback(rawFile.response);
       }
    };
    rawFile.send(null);
}

那样你以后不应该解析JSON吗？

或者，不要覆盖响应，并像处理一样处理JSON解析。

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    //rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
       if (rawFile.readyState === 4 && rawFile.status == "200") {
           callback(rawFile.responseText);
       }
    };
    rawFile.send(null);
}

Answer 2

您无法通过Ajax访问本地文件。浏览器定义这是不安全的操作。

Answer 3

使用AngularJS：$ http服务

$http.get(url)
.then(function(response) {
  // Use the response Json data
});

使用jQuery：

$.getJSON(url, function(result){
    //use result Json data
});

其中URL将是您本地json文件的路径。

Answer 4

javascript中严格禁止加载本地文件。这是该语言的缺陷之一。但是，json已经是一个javascript对象，可以在script标签内读取JSON文件的内容。

问题是如何制作json文件，因为在包含脚本标记后，将其存储在变量中比较容易，以便您引用该变量。

将外部本地JSON文件读入Javascript

4 个答案: