如何从 HTML 中的 URL 获取 JSON 数据 - JavaScript

当我们在编写 JavaScript 应用程序时，我们经常需要从HTML页面的 URL 中获取 JSON 数据。在本文中，我们将讨论如何以及在JavaScript中从HTML中的URL获取JSON数据。

使用 XMLHttpRequest

XMLHttpRequest 是一种用于处理 HTTP 请求的 API。我们可以使用它从 HTML 页面的 URL 中获取 JSON 数据。下面是如何使用 XMLHttpRequest 从 HTML 页面 URL 获取 JSON 数据的代码示例：

const request = new XMLHttpRequest();
request.open('GET', 'example.json', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 成功接收到数据
    const data = JSON.parse(this.response);
    console.log(data);
  } else {
    // 处理错误
  }
};

request.onerror = function() {
  // 处理错误
};

request.send();

上面的代码将使用 XMLHTTPRequest 获取名为 example.json 的 JSON 数据文件。然后，如果获取到数据，则将其解析为 JavaScript 对象并进行输出。如果请求失败或出现错误，则将进入错误处理。

使用 fetch

fetch 是使用 Promise 处理异步请求的 API。它可以从 HTML 页面 URL 中获取 JSON 数据，并将其解析为 JavaScript 对象。下面是如何使用 fetch 从 HTML 页面的 URL 中获取 JSON 数据的代码示例：

fetch('example.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的示例中，fetch 函数将获取 example.json 文件并返回一个响应对象。我们可以使用响应对象的 json() 方法来解析 JSON 数据并返回一个 Promise。然后我们可以使用 then() 函数来访问解析的数据，以及 catch() 函数来处理错误。

总结

在本文中，我们已经介绍了如何从 HTML 页面中的 URL 获取 JSON 数据，包括使用 XMLHttpRequest 和 fetch API。这些方法可以让我们在 JavaScript 应用程序中轻松获取外部数据。

参考资料

• Using XMLHttpRequest - Web APIs | MDN
• Fetch API - Web APIs | MDN