📅 最后修改于: 2023-12-03 14:52:05.448000 🧑 作者: Mango
在前端开发中，经常需要从本地文件中读取数据。这篇文章将介绍如何使用文件输入 HTML 读取 JSON 文件，使用 Javascript 实现。
首先，需要有一个 HTML 文件作为载体来展示读取到的 JSON 数据。在 HTML 文件中添加一个空的 <div> 标签来显示数据：
<body>
<div id="output"></div>
</body>
第二步是准备好要读取的 JSON 文件。假设我们有一个名为 data.json 的文件，其中包含以下内容：
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
接下来，需要使用 XHR 对象来请求 JSON 文件。XHL 是 XMLHttpRequest 的缩写，它是一个可用于浏览器和 Node.js 的 JavaScript API，用于向服务器发送 HTTP 请求和接收响应。
以下是使用 XHR 对象读取 JSON 文件的示例代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = xhr.responseText;
console.log(response);
// 输出: {"name": "John Doe", "age": 30, "city": "New York"}
}
};
xhr.send();
这段代码创建了一个 XHR 对象，使用 open() 方法打开一个 GET 请求，然后在 onreadystatechange 回调函数中检查状态是否成功，如果成功，把响应的数据存入 response 变量中，并在控制台中显示出来。
在上一步中，我们已经可以读取 JSON 文件的内容。但是，由于 JSON 数据本质上是字符串，需要先解析为 JavaScript 对象，才能在页面上显示。
以下是将 JSON 字符串解析为 JavaScript 对象的示例代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = xhr.responseText;
const data = JSON.parse(response);
console.log(data);
// 输出: {name: "John Doe", age: 30, city: "New York"}
}
};
xhr.send();
这段代码使用了 JSON.parse() 方法将字符串解析成 JavaScript 对象。然后，在控制台中显示出来，以验证解析结果是否正确。
现在我们已经可以从 JSON 文件中读取数据，并将其解析为 JavaScript 对象。下一步是将数据显示在 HTML 中。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = xhr.responseText;
const data = JSON.parse(response);
const output = document.getElementById('output');
output.innerHTML = `Name: ${data.name}, Age: ${data.age}, City: ${data.city}`;
}
};
xhr.send();
这段代码首先获取 output 元素，然后使用 innerHTML 属性在其中插入数据。这个 innerHTML 属性可以将字符串作为 HTML 插入元素中，这里我们将 data 对象的三个属性插入。
现在我们已经了解了如何使用文件输入 HTML 读取 JSON 文件，现在可以把上面的所有步骤整合起来。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = xhr.responseText;
const data = JSON.parse(response);
const output = document.getElementById('output');
output.innerHTML = `Name: ${data.name}, Age: ${data.age}, City: ${data.city}`;
}
};
xhr.send();
如上所示，这段代码将得到名为 data.json 的文件并在浏览器中显示其数据，该文件包含以下内容：
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
innerHTML 属性将把这条数据显示在 HTML 页面上：
<body>
<div id="output">Name: John Doe, Age: 30, City: New York</div>
</body>
在这篇文章中，我们学习了如何使用文件输入 HTML 读取 JSON 文件。这个过程需要几个步骤，包括：
<div> 元素作为数据输出位置；通过这种方式，我们可以快速、简便地读取 JSON 文件，并将其数据在网页上显示。