ajax遍历json成table

Ajax是一种用于在网页上异步加载数据的技术。它允许我们通过JavaScript在后台与服务器进行数据交换，然后使用获取到的数据来更新网页的内容，而无需刷新整个页面。在网页开发中，经常会使用Ajax来动态地将数据显示在表格中。

要遍历JSON数据并将其显示在表格中，我们可以使用JavaScript的循环结构来遍历JSON对象中的每个属性和值，并将它们添加到表格的行和列中。

我们需要创建一个空的HTML表格，用于显示JSON数据。我们可以使用HTML的table、tr和td标签来定义表格的结构。然后，我们可以使用JavaScript中的Ajax技术来获取JSON数据。

在下面的示例中，我们将使用XMLHttpRequest对象来发送Ajax请求，并使用GET方法从服务器获取JSON数据。一旦我们获取到数据，就可以使用JSON.parse()方法将其转换为JavaScript对象。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 发送Ajax请求
xhr.open('GET', 'data.json', true);
xhr.send();
// 监听请求的状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取JSON数据
    var jsonData = JSON.parse(xhr.responseText);
    // 遍历JSON数据并将其显示在表格中
    var table = document.createElement('table');
    for (var i = 0; i < jsonData.length; i++) {
      var row = document.createElement('tr');
      for (var key in jsonData[i]) {
        var cell = document.createElement('td');
        cell.textContent = jsonData[i][key];
        row.appendChild(cell);
      }
      table.appendChild(row);
    }
    // 将表格添加到页面中的某个元素中
    var container = document.getElementById('table-container');
    container.appendChild(table);
  }
};

在上面的示例中，我们首先使用XMLHttpRequest对象创建一个Ajax请求。然后，我们使用open()方法指定请求的方法（GET）、URL（data.json）和是否异步（true）。接下来，我们使用send()方法发送请求。

在请求的状态变化时，我们使用onreadystatechange事件监听请求的状态。当请求的状态为4（已完成）并且状态码为200（成功）时，我们获取到了服务器返回的JSON数据。然后，我们使用JSON.parse()方法将JSON数据转换为JavaScript对象。

接下来，我们使用循环结构遍历JSON数据，并将每个属性和值添加到表格的行和列中。我们使用createElement()方法创建table、tr和td元素，并使用textContent属性将值添加到单元格中。我们将表格添加到页面中的某个元素中。

通过这种方式，我们可以使用Ajax遍历JSON数据，并将其以表格的形式动态地显示在网页上。这种技术在实现数据的动态加载和展示方面非常有用，可以提升用户体验和页面的交互性。我们还可以根据需要对表格进行样式和布局的调整，以满足具体的设计需求。