📌  相关文章
📜  如何使用 jQuery 从 JSON 文件中获取数据并显示在 HTML 表中？(1)

📅  最后修改于: 2023-12-03 15:08:21.743000             🧑  作者: Mango

如何使用 jQuery 从 JSON 文件中获取数据并显示在 HTML 表中？

当开发 Web 应用程序时，通常需要从服务器获取数据并在页面中显示数据。最常见的数据格式之一是 JSON (JavaScript Object Notation)，因为它易于使用并且可以轻松地转换为 JavaScript 对象。使用 jQuery 从 JSON 文件中获取数据并将其显示在 HTML 表格中是一种非常普遍的需求，本文将介绍如何实现这个目标。

1. 准备工作

在开始之前，需要一个 JSON 文件并放置在服务器上。可以创建一个名为 data.json 的文件，其中包含一些数据，例如：

[
  {
    "name": "John Doe",
    "email": "john.doe@example.com",
    "phone": "(123) 456-7890"
  },
  {
    "name": "Jane Smith",
    "email": "jane.smith@example.com",
    "phone": "(555) 555-5555"
  }
]

此外，还需要一个 HTML 文件和一个 JavaScript 文件。在 HTML 文件的 <head> 标记中添加以下代码来引入 jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

在 HTML 文件的 <body> 标记中添加一个空的表格：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

最后，在 JavaScript 文件中编写代码以从 JSON 文件中获取数据。

2. 获取 JSON 数据

使用 jQuery.getJSON() 方法从服务器获取 JSON 数据。该方法需要两个参数：

  • 一个 Url，指向包含 JSON 数据的文件
  • 一个回调函数，该函数在成功获取 JSON 数据后被调用

以下是从 data.json 文件中获取数据的示例代码：

$.getJSON("data.json", function(data) {
  // 处理数据
});
3. 处理 JSON 数据

成功获取 JSON 数据后，需要将数据添加到 HTML 表格中。可以使用 jQuery 的 .each() 方法遍历 JSON 数组，并将每个对象的属性添加到表格行的单元格中。

$.getJSON("data.json", function(data) {
  $.each(data, function(key, value) {
    var row = $("<tr>");
    row.append($("<td>").text(value.name));
    row.append($("<td>").text(value.email));
    row.append($("<td>").text(value.phone));
    $("#myTable tbody").append(row);
  });
});

在这个示例中，首先使用 .each() 方法遍历 data 数组，并为每个对象创建一个新的表格行 (<tr>)。接下来，使用 .append() 方法将表格单元格 (<td>) 添加到表格行中，并将该单元格的文本设置为相应的属性值。最后，使用 .append() 方法将表格行添加到 HTML 表格中。

4. 完整代码

HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery JSON Table</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script src="app.js"></script>
</body>
</html>

JavaScript 文件：

$.getJSON("data.json", function(data) {
  $.each(data, function(key, value) {
    var row = $("<tr>");
    row.append($("<td>").text(value.name));
    row.append($("<td>").text(value.email));
    row.append($("<td>").text(value.phone));
    $("#myTable tbody").append(row);
  });
});
5. 总结

使用 jQuery 从 JSON 文件中获取数据并将其显示在 HTML 表格中是一种非常常见的需求。通过使用 jQuery.getJSON() 方法从服务器获取 JSON 数据，然后使用 .each() 方法遍历 JSON 数组并在 HTML 表格中添加数据，可以轻松地实现这个目标。