ajax table中取值-ajax获取数据列表展示：示例代码

在网页开发中，我们经常需要通过Ajax技术来获取数据并在表格中展示出来。Ajax是一种在不刷新整个页面的情况下，通过后台服务器异步加载数据的技术。而表格是一种常用的数据展示方式，可以将数据以行和列的形式呈现出来。下面是一段示例代码，演示了如何使用Ajax获取数据并在表格中展示出来。

我们需要在HTML页面中创建一个表格，用于展示数据。这个表格可以是一个普通的HTML表格，也可以使用一些前端框架（如Bootstrap）提供的表格组件。示例代码如下：

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

接下来，我们需要编写JavaScript代码，使用Ajax技术从后台服务器获取数据，并将数据填充到表格中。示例代码如下：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 发送Ajax请求
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，解析返回的JSON数据
    var data = JSON.parse(xhr.responseText);
    // 清空表格内容
    var tableBody = document.querySelector('#data-table tbody');
    tableBody.innerHTML = '';
    // 遍历数据，创建表格行并填充数据
    for (var i = 0; i < data.length; i++) {
      var row = document.createElement('tr');
      var nameCell = document.createElement('td');
      var ageCell = document.createElement('td');
      var genderCell = document.createElement('td');
      nameCell.textContent = data[i].name;
      ageCell.textContent = data[i].age;
      genderCell.textContent = data[i].gender;
      row.appendChild(nameCell);
      row.appendChild(ageCell);
      row.appendChild(genderCell);
      tableBody.appendChild(row);
    }
  }
};
xhr.send();

以上代码首先创建了一个XMLHttpRequest对象，然后使用open方法指定请求的URL和请求方法（GET、POST等），并设置为异步请求。接着，我们通过onreadystatechange事件监听器来处理请求的状态变化。当请求状态为4（请求已完成）且状态码为200（请求成功）时，表示数据已经返回，我们可以通过responseText属性获取到返回的数据。然后，我们解析返回的JSON数据，并遍历数据，创建表格行并填充数据。将表格行添加到表格的tbody中。

通过以上示例代码，我们可以实现在网页中使用Ajax技术获取数据，并在表格中展示出来。这样，我们就可以动态地更新表格中的数据，而不需要刷新整个页面。