数据渲染到页面

最新推荐文章于 2023-06-24 13:19:34 发布

名师点津

最新推荐文章于 2023-06-24 13:19:34 发布

阅读量2k

点赞数 2

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_51281306/article/details/123949465

版权

这篇博客介绍如何通过JavaScript从服务器获取数据，并将其动态渲染到HTML表格中。示例展示了利用XMLHttpRequest发送GET请求到'http://localhost:3000/users'，然后将JSON响应转换并循环遍历，最后用模板字符串将数据填充到表格中。

摘要由CSDN通过智能技术生成

客户端中拿到请求的数据过后最常见的就是把这些数据呈现到界面上。如果数据结构简单，可以直接通过字符串操作（拼接）的方式处理但是如果数据过于复杂，字符串拼接维护成本太大，就不推荐了可以使用模版引擎或者 ES6 提供的模板字符串

<table border="1" id="box">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>班级</th>
    </tr>

</table>
<script>
    // 获取元素
    var box = document.getElementById("box");
    var xhr = new XMLHttpRequest();
    // 发送 GET 请求
    xhr.open("GET", "http://localhost:3000/users");
    xhr.send(null);
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        // 讲获取的响应体的字符串转为对象
        var data = JSON.parse(this.respon