ajax返回json怎么加入表(ajax 返回)

当使用Ajax向服务器发送请求并获取响应时，常见的响应格式之一是JSON（JavaScript Object Notation）。JSON是一种轻量级的数据交换格式，易于阅读和编写，并且在前端开发中得到广泛应用。在Ajax中，我们可以通过将返回的JSON数据加入到表格中来展示数据。

我们需要在页面中创建一个表格元素，用于展示数据。可以使用HTML的`<table>`标签来创建表格，并在其中添加`<thead>`和`<tbody>`标签分别用于表头和表体。

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据将会动态添加到这里 -->
  </tbody>
</table>

接下来，我们需要使用Ajax来获取JSON数据，并将其解析后添加到表格中。可以使用JavaScript中的`XMLHttpRequest`对象来发送Ajax请求，并通过`responseText`属性获取响应的文本数据。

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var jsonData = JSON.parse(xhr.responseText);
    var tableBody = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    for (var i = 0; i < jsonData.length; i++) {
      var row = document.createElement("tr");
      var idCell = document.createElement("td");
      var nameCell = document.createElement("td");
      var ageCell = document.createElement("td");
      idCell.textContent = jsonData[i].id;
      nameCell.textContent = jsonData[i].name;
      ageCell.textContent = jsonData[i].age;
      row.appendChild(idCell);
      row.appendChild(nameCell);
      row.appendChild(ageCell);
      tableBody.appendChild(row);
    }
  }
};
xhr.send();

在上述代码中，我们首先创建了一个`XMLHttpRequest`对象，并通过`open`方法指定了请求的方法、URL和异步标志。然后，我们通过`onreadystatechange`事件处理程序来监听请求的状态变化。当请求的状态为4（表示请求已完成）且响应的状态码为200（表示请求成功）时，我们解析了响应的JSON数据，并获取了表格的`tbody`元素。接着，我们使用`for`循环遍历JSON数据，并为每个数据项创建一个表格行（`<tr>`元素）和对应的单元格（`<td>`元素），并将数据填充到单元格中。我们将每行添加到表格的`tbody`中。

通过以上步骤，我们成功将Ajax返回的JSON数据添加到了表格中，实现了数据的展示。这种方式可以方便地将服务器返回的数据以表格形式展示给用户，提高了交互性和可读性。

需要注意的是，上述代码中的URL应该替换为实际的数据接口地址，并确保服务器返回的数据格式是符合JSON标准的。还可以根据实际需求对表格的样式进行自定义，以达到更好的用户体验。