jQuery 遍历接口数据并展示到表格中

首先，需要使用 jQuery 的 AJAX 方法从接口中获取数据。假设我们的接口返回一个 JSON 数组，其中每个对象表示一个人的信息，如下所示：

[
  {
    'name': 'Alice',
    'age': 25,
    'gender': 'Female'
  },
  {
    'name': 'Bob',
    'age': 30,
    'gender': 'Male'
  },
  {
    'name': 'Charlie',
    'age': 35,
    'gender': 'Male'
  }
]

接下来，我们需要使用 jQuery 的 each 方法遍历这个数组，并将每个对象的属性值添加到一个 HTML 表格中。假设我们的表格的 HTML 代码如下所示：

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

然后，我们可以使用以下代码将数据添加到表格中：

$.ajax({
  url: "http://example.com/api/people",
  dataType: "json",
  success: function(data) {
    $.each(data, function(index, person) {
      $("#data-table tbody").append("<tr><td>" + person.name + "</td><td>" + person.age + "</td><td>" + person.gender + "</td></tr>");
    });
  }
});

这段代码首先使用 AJAX 方法从接口中获取数据，然后使用 each 方法遍历数据，将每个人的属性值添加到一个 HTML 表格中。在这个例子中，我们将数据添加到 tbody 标签中的一个新行中。