javasript加载本地json文件并解析
时间: 2023-10-31 14:06:40 浏览: 41
可以使用 `XMLHttpRequest` 或 `fetch` 来加载本地的 JSON 文件,然后解析其内容。
以下是使用 `XMLHttpRequest` 的示例代码:
```js
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求的文件路径
xhr.open('GET', 'data.json', true);
// 设置请求头,指定返回的数据类型为 JSON
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听 readyState 的变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析 JSON 数据
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
// 发送请求
xhr.send();
```
以下是使用 `fetch` 的示例代码:
```js
// 发送请求并获取响应
fetch('data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
以上代码中,`fetch` 函数会返回一个 Promise 对象,然后使用 `then` 方法解析响应内容并输出到控制台。如果发生错误,则使用 `catch` 方法捕获并输出错误信息。