ajax返回的json添加到表格中

最近在使用 ajax 技术将返回的 JSON 数据添加到表格中，代码比较简单，可以轻松实现。

// 定义表格数据格式
var tblData = [
  { id: 1,name: 'John',age: 25 },{ id: 2,name: 'Mary',age: 30 }
];

// 将表格数据显示在页面上
function displayTable() {
  var tblBody = document.getElementById('tblBody');
  tblBody.innerHTML = '';
  for (var i = 0; i ' + tblData[i].id + '' +
                    tblData[i].name + '' + tblData[i].age + '';
    tblBody.appendChild(row);
  }
}

// 使用 ajax 获取 JSON 数据并添加到表格
function getJSONData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var jsonData = JSON.parse(this.responseText);
      tblData.push(jsonData);
      displayTable();
    }
  };
  xhr.open('GET','data.json',true);
  xhr.send();
}

可以看到，在使用 ajax 获取 JSON 数据后，我们只需要将获取到的数据 push 到 tblData 数组中，最后再调用 displayTable 函数即可将数据显示在表格中。

当然，在实际应用中可能会存在很多不同的情况，需要根据实际情况进行修改和优化。