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

在 Web 开发中，我们经常需要从后端获取 JSON 格式的数据并在前端进行展示。jQuery 提供了方便的方法，使我们可以轻松地从 JSON 文件中获取数据并将其显示在 HTML 表中。

下面让我们一步步实现这个功能。

获取 JSON 数据

首先，我们需要获取 JSON 数据。使用 jQuery 的 AJAX 方法可以很方便地实现。

$.ajax({
  url: 'data.json',
  dataType: 'json',
  success: function(data) {
    // 获取成功后的回调函数
    console.log(data);
  },
  error: function() {
    // 获取失败后的回调函数
  }
});

在这个例子中，我们使用了 $.ajax 方法来请求 data.json 文件，设置 dataType 参数为 json，表示请求的是 JSON 数据。在回调函数 success 中，我们可以获取到获取成功后的数据。

显示数据

获取到 JSON 数据后，我们需要将其显示在 HTML 表中。这里我们使用 jQuery 的 $.each 方法来遍历数据并动态地向表格中添加数据。

$.ajax({
  url: 'data.json',
  dataType: 'json',
  success: function(data) {
    var table = $('<table>');
    var header = $('<tr>');
    header.append($('<th>').text('Name'));
    header.append($('<th>').text('Age'));
    table.append(header);

    $.each(data, function(i, item) {
      var row = $('<tr>');
      row.append($('<td>').text(item.name));
      row.append($('<td>').text(item.age));
      table.append(row);
    });

    $('#table-container').append(table);
  },
  error: function() {
    // 获取失败后的回调函数
  }
});

在这个例子中，我们首先创建了一个空的表格和表头，然后使用 $.each 方法遍历数据，并将每个数据项添加为一行。最后，我们将表格添加到 HTML 页面中。

完整代码

下面是完整的代码，包括获取 JSON 数据和显示数据。

$.ajax({
  url: 'data.json',
  dataType: 'json',
  success: function(data) {
    var table = $('<table>');
    var header = $('<tr>');
    header.append($('<th>').text('Name'));
    header.append($('<th>').text('Age'));
    table.append(header);

    $.each(data, function(i, item) {
      var row = $('<tr>');
      row.append($('<td>').text(item.name));
      row.append($('<td>').text(item.age));
      table.append(row);
    });

    $('#table-container').append(table);
  },
  error: function() {
    // 获取失败后的回调函数
  }
});

总结

jQuery 提供了便捷的方法从 JSON 文件中获取数据并动态地将它们添加到 HTML 表中。使用 $.ajax 方法获取 JSON 数据，使用 $.each 方法遍历数据并将它们添加到 HTML 表格中。