在HTML5中，你可以使用以下三种方法来导入本地的JSON文件数据：
- 使用
XMLHttpRequest（对于现代浏览器） - 使用
fetchAPI - 使用
FileReaderAPI和一个input元素
以下是每种方法的示例代码：
- 使用
XMLHttpRequest：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}
};
xhr.send();- 使用
fetchAPI：
fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('Error fetching JSON:', error));- 使用
FileReaderAPI和input元素：
<input type="file" id="jsonFile" />
<script>
const jsonFile = document.getElementById('jsonFile');
jsonFile.addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
const json = JSON.parse(e.target.result);
console.log(json);
} catch (error) {
console.error('Error parsing JSON:', error);
}
};
reader.readAsText(file);
});
</script>请确保你的JSON文件和HTML文件位于同一个目录中，或者提供正确的文件路径。此外，如果你从本地文件系统加载数据，浏览器可能会因为安全限制而阻止这些操作，这时你可能需要在本地运行一个本地服务器或使用特定的开发工具。