在HTML页面中将数据从JSON文件显示为引导模式

<script src="data.json"></script>

// 使用XMLHttpRequest对象加载JSON文件
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 在这里处理数据并将其显示在HTML页面上
  }
};
xhr.send();

// 或者使用fetch函数加载JSON文件
fetch("data.json")
  .then(response => response.json())
  .then(data => {
    // 在这里处理数据并将其显示在HTML页面上
  });

// 假设JSON数据的格式为：{ "name": "John", "age": 30, "city": "New York" }

// 创建一个<div>元素来显示姓名
var nameElement = document.createElement("div");
nameElement.innerHTML = "姓名：" + data.name;

// 创建一个<div>元素来显示年龄
var ageElement = document.createElement("div");
ageElement.innerHTML = "年龄：" + data.age;

// 创建一个<div>元素来显示城市
var cityElement = document.createElement("div");
cityElement.innerHTML = "城市：" + data.city;

// 将创建的元素添加到页面中的某个容器元素中
var containerElement = document.getElementById("container");
containerElement.appendChild(nameElement);
containerElement.appendChild(ageElement);
containerElement.appendChild(cityElement);

nameElement.className = "name";
ageElement.style.color = "blue";
cityElement.style.fontWeight = "bold";