（HTML/H5）JS导入本地json文件数据的三类方法

在HTML5中，你可以使用以下三种方法来导入本地的JSON文件数据：

1. 使用XMLHttpRequest（对于现代浏览器）
2. 使用fetch API
3. 使用FileReader API和一个input元素

以下是每种方法的示例代码：

1. 使用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();

2. 使用fetch API：

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Error fetching JSON:', error));

3. 使用FileReader API和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文件位于同一个目录中，或者提供正确的文件路径。此外，如果你从本地文件系统加载数据，浏览器可能会因为安全限制而阻止这些操作，这时你可能需要在本地运行一个本地服务器或使用特定的开发工具。