实际开发中，常常会遇到前后端数据的交互，而直观表示数据常常都是加载到页面的表格中便于查看。
我的这个项目基于layui，提供思路及步骤，话不多说，直接开始。

1.基础，首先在html页面中，将表格写出来（html+css）：<thead>是表格头， <tbody>是表格的内容，也就是我们显示json数据的地方，其中需要加上id，便于将数据写进html页面中。

<div class="layui-card-body ">
 <table class="layui-table layui-form">
   <thead>
   <tr>
     <th width="20">
       <input type="checkbox" name="" lay-skin="primary">
     </th>
     <th width="70">学校编号</th>
     <th>学校名称</th>
     <th width="100">状态</th>
     <th width="380">操作</th>
   </thead>
   <tbody class="x-cate" id="test">

   </tbody>
 </table>
</div>

2.核心，写js部分，也就是ajax获取后台传来的数据：在这里要注意声明提升，所以需要在for循环外var str1 = “”; 要不然页面中的第一个数据就会打印undefined。

$(document).ready(function() {
              $.ajax({
                  url : "地址",//后台请求的数据
                  dataType: 'json', //数据格式
                  type : "post",//请求方式
                  async : true,//是否异步请求
                  success : function(data) {   //如果请求成功，返回数据。
                      var tt = data.data;   //第一个data代表json,第二个data代表json里的数组或对象
                      var str1 = "";   //声明str1，防止产生undefined

                      for (var i = 0; i < tt.length; i++) {   //遍历
                          str1 += "<tr cate-id='0' fid='0'>" +
                              "<td>" + tt[i].1+ "</td>" +    //i代表下标，获取数据中的下标为i的1的值
                              "<td>" + tt[i].2+ "</td>" +    //i代表下标，获取数据中的下标为i的2的值
                              "<td>" + tt[i].3+ "</td>" +    //i代表下标，获取数据中的下标为i的3的值
                              //.....
                              "<td>" + tt[i].n+"</td>";    //i代表下标，获取数据中的下标为i的n的值，1-n是属性名
                      }
                      test.innerHTML = str1;   //将数据写入html中
                  },
                  error : function (arg1) {
                      alert("加载数据失败");
                      console.log(arg1);
                  }
              })
          })

3.成功加载，ajax动态获取到json数据打印在页面中：