在html页面向后端请求数据,使用的是jQuery ajax() 方法,详细的介绍请看:https://www.runoob.com/jquery/ajax-ajax.html
数据请求成功后动态的添加进表格显示出来,有原生方法和jQuery方法。
html
<!-- bootstrap响应式表格 -->
<div class="table-responsive-sm">
<table class="table table-striped table-bordered my-4">
<thead class="table-dark">
<tr>
<th>序号</th>
<th>区域</th>
<th>店铺</th>
<th>营业额</th>
<th>数量</th>
</tr>
</thead>
<!-- 表格数据从后端返回,动态添加进表格 -->
<tbody> </tbody>
</table>
</div>
js
function getList() {
//请求接口
$.ajax({
type: 'GET',
dataType: 'json', //设置返回数据的格式
url: 'http://xxxxxxxxxxxxx/sale',
data: { //提交给后端的数据
dd: '0',
userid: '01O',
order: "mn desc", //按金额降序
},
success(res) {
let oldArr = res
let newArr = oldArr.map((item, index) => { //提取部分属性组合成新的对象
return Object.assign({}, {
'or': index + 1,
'qy': item.qy,
'name': item.name,
'mn': item.mn,
'nu': item.nu
})
})
// 使用html原生方法动态添加数据进入表格
/* var tbody = document.querySelector('tbody'); //找到tbody标签
for(var i = 0; i < newArr.length; i++) { //对数组进行循环
var tr = document.createElement('tr');
tbody.appendChild(tr); //建立tr标签
for (var k in newArr[i]) { //对数组的每一个元素进行遍历
var td = document.createElement('td'); //新建td
td.innerHTML = newArr[i][k]; //将数据写进td中
tr.appendChild(td); //建立td标签
}
} */
// 使用jquery方法动态添加数据进入表格
for(var i = 0; i < newArr.length; i++) { //对数组进行循环
var tr = $('<tr></tr>'); //创建tr标签
tr.appendTo('tbody'); //把tr标签插入tbody标签中
for (var k in newArr[i]) { //对数组的每一个元素进行遍历
var td = $('<td>'+ newArr[i][k] +'</td>'); //创建td标签并且赋值
td.appendTo(tr) //把td插入tr
}
}
},
error(err) {
console.log('请求失败')
}
})
}