在 HTML 中显示 JSON 数据 - JavaScript

JSON 是一种轻量级的数据传输格式，在 Web 开发中经常被用来传输数据。其中，HTML 是一种用来呈现数据的标记语言。所以，我们通常需要在 HTML 中显示 JSON 数据。

在本文中，我们将介绍如何使用 JavaScript 将 JSON 数据展示在 HTML 页面上。我们将讨论两种方法：

1. 使用 XMLHttpRequest 对象
2. 使用 Fetch API

使用 XMLHttpRequest 对象

XMLHttpRequest 对象可用于从网址请求文件等数据。它允许 Web 页面更新部分页面而不需要刷新整个页面。

下面是一个例子，如何使用 XMLHttpRequest 对象从一个 JSON 文件中读取数据，然后将数据显示在一个 HTML 元素中：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    const data = JSON.parse(this.responseText);
    const output = document.getElementById("output");
    output.innerHTML = JSON.stringify(data);
  }
};
xhr.open("GET", "data.json", true);
xhr.send();

在这个例子中，我们使用 XMLHttpRequest 对象来获取一个名为 data.json 的本地 JSON 文件，并将其解析为对象。接着，我们在 HTML 中找到一个 id 为 output 的元素，将 JSON 数据以字符串的形式展示在该元素中。

使用 Fetch API

Fetch API 是一种现代的异步请求方式，它提供了一种更简单、更直观的方式来处理异步请求。

下面是一个例子，如何使用 Fetch API 来获取一个 JSON 文件：

fetch("data.json")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const output = document.getElementById("output");
    output.innerHTML = JSON.stringify(data);
  });

在上面的例子中，我们使用 Fetch API 来获取一个名为 data.json 的本地 JSON 文件，并将其解析为对象。接着，我们在 HTML 中找到一个 id 为 output 的元素，将 JSON 数据以字符串的形式展示在该元素中。

总结

以上是使用 JavaScript 在 HTML 页面中显示 JSON 数据的两种方法。使用 XMLHttpRequest 对象或 Fetch API 都是可行的。但是需要注意的是，JSON 数据必须是有效的，否则无法解析并显示。