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

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

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

在 Web 应用程序中，常常需要从服务器或本地文件中获取数据并在页面上显示。JSON 是一种用于数据交换的格式，而 jQuery 是一个流行的 JavaScript 库，它提供了简单易用的 API，可以轻松地获取 JSON 数据并将其呈现在 HTML 表格中。

1. 获取 JSON 数据

在 jQuery 中，可以使用 $.getJSON() 函数来异步加载并从服务器或本地文件中获取 JSON 数据。下面是一个示例：

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

这里使用 data.json 作为数据源文件的名称。当获取到数据时，将调用回调函数，将该数据传递给它的参数。

2. 显示 JSON 数据

一旦获取到 JSON 数据，可以将其显示在 HTML 表格中。在 jQuery 中，可以类似地使用 $.each() 函数遍历数据并以 HTML 表格的形式呈现它。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>从 JSON 文件中获取数据</title>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $.getJSON('data.json', function(data) {
        var table = $('<table></table>').addClass('table');
        var headerRow = $('<tr></tr>').appendTo(table);
        $('<th></th>').text('ID').appendTo(headerRow);
        $('<th></th>').text('Name').appendTo(headerRow);
        $('<th></th>').text('Score').appendTo(headerRow);

        $.each(data, function(index, student) {
          var row = $('<tr></tr>').appendTo(table);
          $('<td></td>').text(student.id).appendTo(row);
          $('<td></td>').text(student.name).appendTo(row);
          $('<td></td>').text(student.score).appendTo(row);
        });

        table.appendTo($('#output'));
      });
    });
  </script>
</head>
<body>
  <h1>从 JSON 文件中获取数据</h1>
  <div id="output"></div>
</body>
</html>

该示例会从 data.json 文件中获取数据，将其呈现在包含表格的 div 元素中。

结论

在本文中，我们介绍了如何使用 jQuery 从 JSON 文件中获取数据并呈现在 HTML 表格中。通过使用 $.getJSON() 和 $.each() 函数，程序员可以轻松地加载和处理 JSON 数据，同时使用 jQuery 简化了 JavaScript 代码的编写。