ajax返回json生成表格

AJAX是前端开发中常用的技术之一，可以实现局部刷新页面的效果。而JSON（JavaScript Object Notation）是一种数据格式，可以用来传输数据。本文介绍了如何使用AJAX返回JSON数据，并生成一个表格。

首先，在HTML中创建一个表格元素:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

接着，使用AJAX发送请求，并处理返回的JSON数据:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(this.responseText);
    var tbody = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    for(var i=0;i<response.length;i++){
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      td1.innerHTML = response[i].name;
      var td2 = document.createElement("td");
      td2.innerHTML = response[i].age;
      var td3 = document.createElement("td");
      td3.innerHTML = response[i].sex;
      var td4 = document.createElement("td");
      td4.innerHTML = response[i].email;
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tr.appendChild(td4);
      tbody.appendChild(tr);
    }
  }
};
xmlhttp.open("GET","data.json",true);
xmlhttp.send();

以上代码使用XMLHttpRequest对象发送GET请求，请求的地址为data.json文件，这个文件中存放了JSON格式的数据。当请求完成之后，处理返回的数据。首先将JSON数据解析成一个对象，然后遍历对象数组，为每个对象创建一行表格，将数据填充到表格中。

最后，当页面加载完成时，执行以上代码，即可生成一个表格。

document.addEventListener("DOMContentLoaded",function(event) {
  //以上AJAX代码
});