客户端中拿到请求的数据过后最常见的就是把这些数据呈现到界面上。

    如果数据结构简单，可以直接通过字符串操作（拼接）的方式处理

    但是如果数据过于复杂，字符串拼接维护成本太大，就不推荐了

    可以使用模版引擎或者ES6提供的模板字符串

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } table { width: 300px; margin: 30px auto; font: 14px/28px “微软雅黑”; color: #333; border-collapse: collapse; } td,th { width: 100px; } </style> </head> <body> <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.responseText) console.log(data); var str = “”; // 循环遍历数组 for (var i = 0 ; i < data.length ;i++) { // 进行字符串拼接 // str += ““ + data[i].id + ““ + data[i].name + ““ + data[i].age + ““ + data[i].class + ““; // 使用 模板字符串 进行拼接 str += ` ${data[i].id} ${data[i].name} ${data[i].age} ${data[i].class} ` } box.innerHTML += str; } }; </script> </body> </html>