将外部本地 JSON 文件读入 Javascript

Question

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

但是，我无法做到。 我的 C 盘中有一个 test.json，路径是“c:\\\\test.json”。 我认为我的程序是这样工作的：当本地 json 文件中的内容更新时，我的程序将提醒 json 文件中的数据。 我不知道我的程序有什么问题。 希望有人可以帮助我。 提前谢谢你。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>noName</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="test.json"></script>
    <script type="text/javascript" src="javascrip.js"></script>
</head>


<script type="text/javascript">

    $(document).ready(function() {
        alert("goes here ");
        readTextFile("c:/test.json", function(text){
        var data = JSON.parse(text);
        alert(data);
    });
});


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

测试文件

{"notes":["s0","s5","s4","s3","s2","s1"]}

Answer 1

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

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

请注意，您不能从本地系统加载任何文件......只是从您的 HTML 页面（相对）“foo/bar/data.json”“期待”的文件，而不是“C:/data.json”。

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

希望这会有所帮助。

还有最后一件事。 当您使用 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 个解决方案

解决方案1
2 已采纳 2016-12-04 05:15:32

解决方案2
0 2016-12-04 04:16:59

解决方案3
0 2016-12-04 05:36:43

解决方案4
0 2019-11-26 04:27:29

将外部本地 JSON 文件读入 Javascript

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-12-04 05:15:32

解决方案2 0 2016-12-04 04:16:59

解决方案3 0 2016-12-04 05:36:43

解决方案4 0 2019-11-26 04:27:29

解决方案1
2 已采纳 2016-12-04 05:15:32

解决方案2
0 2016-12-04 04:16:59

解决方案3
0 2016-12-04 05:36:43

解决方案4
0 2019-11-26 04:27:29