ajax动态获取后台传来json数据，加载到页面表格中

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

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

 

   

   

     

       
     
     
学校编号
     
学校名称
     
状态
     
操作
   
   


   
 

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 += "" +
                              "" + tt[i].1+ "" +    //i代表下标，获取数据中的下标为i的1的值
                              "" + tt[i].2+ "" +    //i代表下标，获取数据中的下标为i的2的值
                              "" + tt[i].3+ "" +    //i代表下标，获取数据中的下标为i的3的值
                              //.....
                              "" + tt[i].n+"";    //i代表下标，获取数据中的下标为i的n的值，1-n是属性名
                      }
                      test.innerHTML = str1;   //将数据写入html中
                  },
                  error : function (arg1) {
                      alert("加载数据失败");
                      console.log(arg1);
                  }
              })
          })

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