html通过getJSON读取本地json文件
时间: 2024-10-11 12:13:03 浏览: 30
jQuery ajax读取本地json文件的实例
HTML本身并不直接支持`getJSON`方法,这是JavaScript的一种常见做法,通常用于从服务器获取JSON数据。如果你想要在HTML页面上读取本地JSON文件,你需要结合JavaScript特别是`fetch`, `XMLHttpRequest` (XHR) 或者`FileReader API`来实现。
以下是使用JavaScript (通常是异步的方式) 通过`fetch`来读取本地JSON文件的一个示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
async function loadLocalJson() {
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
const jsonContent = JSON.parse(e.target.result);
console.log(jsonContent); // 这里可以处理得到的数据
} catch(error) {
console.error("Error parsing JSON:", error);
}
};
if (file) {
reader.readAsText(file);
}
}
</script>
</head>
<body>
<input type="file" id="fileInput" onchange="loadLocalJson();">
</body>
</html>
```
在这个例子中,用户选择了一个本地文件后,会触发`loadLocalJson`函数,然后使用`FileReader`逐块读取文件内容,并尝试解析为JSON格式。
阅读全文