ajax动态获取后台传来json数据，加载到页面表格中 |
您所在的位置：网站首页 › html加载JSON › ajax动态获取后台传来json数据，加载到页面表格中 |
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数据打印在页面中： |
【本文地址】
今日新闻 |
推荐新闻 |