html加载本地JSON文件
时间: 2023-08-28 12:06:42 浏览: 50
要在HTML中加载本地JSON文件,可以使用`XMLHttpRequest`对象来读取本地文件并将其作为JSON数据来解析。以下是一些简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加载本地JSON文件</title>
</head>
<body>
<div id="output"></div>
<script>
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 打开一个GET请求,指定JSON文件的路径
xhr.open('GET', 'data.json', true);
// 设置响应类型为JSON
xhr.responseType = 'json';
// 当请求完成时执行
xhr.onload = function() {
if (xhr.status === 200) {
// 如果请求成功,解析JSON数据并输出到页面
var data = xhr.response;
document.getElementById('output').innerHTML = JSON.stringify(data);
} else {
// 如果请求失败,输出错误信息
console.log('请求失败,错误码:' + xhr.status);
}
};
// 发送请求
xhr.send();
</script>
</body>
</html>
```
在这个示例中,我们使用`XMLHttpRequest`对象读取了一个名为`data.json`的本地JSON文件,并将其解析为JSON对象,最后将其输出到页面上。需要注意的是,这个示例中的页面和JSON文件必须位于同一个目录下,且需要通过HTTP服务器来访问,否则会出现跨域问题。