使用 JavaScript 将 JSON 信息获取到 HTML 控件中

本文将介绍如何使用 JavaScript 从 JSON 中获取信息，并将其渲染到 HTML 控件中。

JSON 是什么

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 JavaScript 语法，但与 JavaScript 无关。JSON 格式可用于存储、交换和传输数据。可以通过 JavaScript 中的内置方法处理 JSON 数据。

从 JSON 中获取信息

要从 JSON 中获取信息，我们需要使用 XMLHttpRequest 对象或 fetch API 来读取 JSON 文件或 API 中的数据。

XMLHttpRequest 方法

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "filename.json", true);
xmlhttp.send();

上面的代码使用了 XMLHttpRequest 对象来获取一个 JSON 文件，并将其解析为一个对象 myObj。然后将对象中的 name 属性渲染到 HTML 控件中。

fetch 方法

fetch('filename.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myObj) {
    document.getElementById("demo").innerHTML = myObj.name;
  });

这里使用了 fetch 方法来获取指定 JSON 文件的内容。获取到响应后，我们将其处理为 JSON 格式的数据并返回。然后将对象中的 name 属性渲染到 HTML 控件中。

将信息渲染到 HTML 控件中

在从 JSON 中获取到信息后，我们需要将它渲染到 HTML 控件中。以下是几个常见的 HTML 控件的示例：

<div> 标签

<div id="demo"></div>

这个 <div> 标签表示页面中的空白区域。使用 getElementById 方法来获取该标签并向其 innerHTML 属性中添加内容。

<ul> 和 <li> 标签

<ul id="demo"></ul>

上面的代码创建了一个无序列表 <ul>，并向其添加了一个 id 属性。将 JSON 信息渲染为一个列表时常常使用这种方式。

var text = ""; 

for (var i = 0; i < myObj.length; i++) { 
  text += "<li>" + myObj[i].name + "</li>";
}

document.getElementById("demo").innerHTML = text;

这个 JavaScript 代码通过循环遍历 JSON 中包含的所有项目，并将每个项目渲染成一个 <li> 标签。将生成的 HTML 字符串保存在变量 text 中，然后渲染到 HTML 控件中。

总结

在本文中，我们学习了如何使用 JavaScript 从 JSON 中获取信息，并将其渲染到 HTML 控件中。我们学习了两种从 JSON 中获取数据的方法：XMLHttpRequest 对象和 fetch 方法。我们还学习了如何将获取的信息渲染到常见的 HTML 控件中。让我们开始应用这些知识来构建可扩展的、基于 JSON 的 Web 应用程序吧！