ajax获取json数据到表格

在前端开发中，我们经常需要通过AJAX 获取JSON数据，并将其渲染到表格中。这种操作既简单又常见，本文将和大家一起学习如何使用AJAX 获取数据并渲染到表格中。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 指定请求的方法和URL
xhr.open("GET","/api/data",true);
// 发送请求
xhr.send();
// 监听AJAX响应状态
xhr.onreadystatechange = function() {
  // 判断AJAX响应状态是否正常
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 将JSON响应数据转换为JavaScript对象
    var data = JSON.parse(xhr.responseText);
    // 获取表格元素
    var table = document.querySelector("#mytable tbody");
    // 渲染表格数据
    data.forEach(function(item) {
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      td1.textContent = item.name;
      td2.textContent = item.age;
      tr.appendChild(td1);
      tr.appendChild(td2);
      table.appendChild(tr);
    });
  }
}

以上就是通过AJAX 获取JSON 数据并渲染到表格中的基本方法。需要注意的是，这里我们监听了XMLHttpRequest 的 readyState 属性，用以判断 AJAX 请求是否已完成。我们通过判断响应的状态码是否为 200 来确定请求是否成功。