读取文件 json - JavaScript

在 JavaScript 中，我们可以使用内置的方法来读取 JSON 文件。JSON 是一种用于传输和存储数据的语言无关格式，通常用于客户端和服务器之间的数据交换。

读取 JSON 文件

要在 JavaScript 中读取 JSON 文件，我们可以使用 XMLHttpRequest（XHR）对象。

下面是读取同一目录下的 "example.json" 文件的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json');

xhr.onload = function() {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

xhr.send();

我们首先使用 XMLHttpRequest 以 GET 方式请求 JSON 文件。然后我们注册一个事件处理程序来处理来自服务器的响应。

在该响应的“onload”函数内，我们首先检查响应的状态是否为200，表示成功。然后，我们使用 JSON.parse() 方法将响应文本解析为 JavaScript 对象，最后将其记录到控制台。

读取本地文件系统中的 JSON 文件

在本地文件系统中读取 JSON 文件时，我们将使用 File API 和 FileReader API。这需要使用["input type=file"]标签，但是我们可以将这个标签隐藏，让用户感觉没有变化。

下面是一个读取本地文件系统中的 JSON 文件的示例代码：

<input type="file" id="file-input" onchange="readFile()">

<script>
    function readFile() {
        var file = document.getElementById('file-input').files[0];
        var reader = new FileReader();

        reader.onload = function() {
            var data = JSON.parse(reader.result);
            console.log(data);
        };

        reader.readAsText(file);
    }
</script>

在这里，我们先创建一个文件输入元素，然后将其隐藏。当用户选择一个文件时，onchange 事件会触发 readFile() 函数。

该函数获取选择的文件，然后创建一个 FileReader 对象。我们注册一个事件处理程序来处理 FileReader 对象的“onload”事件。在这个事件中，我们先使用 FileReader 对象的 result 属性获取文件内容（这是一个字符串）。接下来，我们将其解析为 JavaScript 对象，然后将其记录到控制台。

结论

JavaScript 中可以使用 XMLHttpRequest 对象和 File API / FileReader API 读取 JSON 文件。这使我们可以轻松地从客户端和服务器之间交换数据，并读取本地文件系统中的 JSON 文件。

参考链接

• MDN Fetch API
• MDN XMLHttpRequest
• MDN FileReader