ajax遍历json放入表格

AJAX是一种在不需要页面刷新的情况下，改变页面内容的技术。使用AJAX可以向服务器发送请求并接收响应，然后使用JavaScript将响应内容添加到页面中。在这个例子中，我们将展示如何使用AJAX遍历JSON并将其放入表格中。

// HTML代码
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

//JavaScript代码
var xmlhttp = new XMLHttpRequest();
var url = "data.json"; // JSON文件的地址

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText); // 将响应文本转换为JavaScript对象
    displayTable(myArr); // 调用displayTable()函数显示表格
  }
};
xmlhttp.open("GET",url,true);
xmlhttp.send();

function displayTable(arr) {
  var out = "";
  var i;
  var table = document.getElementById("myTable");

  for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" +
    arr[i].Name +
    "</td><td>" +
    arr[i].Age +
    "</td><td>" +
    arr[i].City +
    "</td></tr>";
  }
  table.tBodies[0].innerHTML = out; // 将表格的主体部分填充为out
}

ajax遍历json放入表格

以上代码中，我们使用了XMLHttpRequest对象来获取JSON数据，并使用JSON.parse()方法将响应文本转换为JavaScript对象。然后，我们调用了displayTable()函数将从JSON对象中提取的数据放入表格中。最后，我们使用innerHTML属性将动态生成的表格添加到页面中。

总之，AJAX可以让我们在不刷新整个页面的情况下更新部分页面。在这个例子中，我们使用AJAX遍历JSON并将其放入表格中展示了如何使用AJAX技术。

ajax遍历json放入表格

相关文章