html页面中引入json的写法

在 HTML 页面中引入 JSON 数据可以通过以下两种方式实现：

1. 使用 AJAX 技术请求 JSON 数据，并将其渲染到页面上：

<div id="json-data"></div>

<script>
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      const jsonData = document.getElementById('json-data');
      jsonData.innerHTML = JSON.stringify(data);
    }
  };
  xhr.send();
</script>

2. 直接在 HTML 页面中引入 JSON 文件：

<div id="json-data"></div>

<script src="data.json"></script>
<script>
  const jsonData = document.getElementById('json-data');
  jsonData.innerHTML = JSON.stringify(data);
</script>

需要注意的是，第二种方式在某些浏览器中可能无法正常工作，因为浏览器会尝试将 JSON 文件解析为脚本文件。为了确保能够正常工作，可以在服务器端将 JSON 文件的 MIME 类型设置为 application/json。