AJAX---如何处理服务端响应的数据

如何处理服务端响应的数据

 

举例：动态渲染数据到表格中，除了自己写js代码，还可以用模板

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态渲染数据到表格中</title>
</head>
<body>
  <table>
    <tbody id="content"></tbody>
  </table>
  <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'test.php')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return
      var res = JSON.parse(this.responseText)
      // res => 服务端返回的数据
      var data = res.data
      for (var i = 0; i < data.length; i++) {
        // 先创建行
        // 再创建列
        // 再将列添加到行
        // 再将行添加到tbody
        // console.log(data[i])
        var tr = document.createElement('tr')
        tr.innerHTML = '<td>' + data[i].id + '</td><td></td><td></td><td></td><td></td><td></td>'
      }
    }
  </script>
</body>
</html>

 

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中

模板引擎：
artTemplate：https://aui.github.io/art-template/

 

posted @ 2020-02-07 18:18  jane_panyiyun  阅读(277)  评论(0)  编辑  收藏  举报