最近工作需要在原来静态看板(大屏)页面的基础上,实现数据的动态展示,而且需要定时刷新。
接到任务后就马不停蹄的开始修改页面:
显然这个需求最好的解决方法就是用Ajax对后台数据进行定时请求,在前端页面进行刷新
对后台数据进行遍历,循环展示在表格上。
老实讲,做个Ajax向后端请求数据确实easy,但是刺激的是没有后台交互的模块给我拿来测试,作为实习生的我又不可能招呼其他人来帮助我完成测试。
所以还是得靠自己。
接下来我只能凭借我做博客系统积攒的一些PHP经验写出一个后台模块,独立完成测试工作。
代码如下:
data;
//echo $arr;
//下面是为了拆分后台数据所做的努力了:$sign是判断总数据可以分成多少页
$sign = intval(count($arr)/$listNum)+1;
//如果传过来的页码大于总页码,不好意思,智能取模了,这样才能一直循环下去
if ($page >= $sign) {
$page = $page % $sign;
}
//array_slice(array,start,length),php截取数组的方法
$toget = array_slice($arr,$page*$listNum,$listNum);
//返回数据
echo json_encode($toget);
?>
顺便说一下我们老大给我派发任务的时候的一个知识点:
- 我原来的思路是用一次Ajax请求将后台数据全部拿到,然后在前端分页循环展示(这可能是作为前端开发者常有的思维,),这个思路看似没有问题。
- 因为我们的系统是要部署到工业生产现场的,网络延迟和实时数据 是两个不得不考虑的问题,那么这个时候就必须减少每次请求的负载,还要考虑数据的实效性。
- 这样一来显然通过小批量多频次请求数据更靠谱。
- 所以有了现在的解决方案。
为了方便读者理解整个思路,附上Ajax请求部分代码:
window.onload=function(){
var page = 0 ;
var listNum = 6;
console.log('000');
getAjax(page,listNum);
//getAjax(page,listNum);
setInterval(function(){
page++;
//getAjax(page,listNum);
console.log(page);
getAjax(page,listNum);
},3000);
function getAjax(page,listNum){
var args = {"page":page,"listNum":listNum,"time":new Date()};
$.getJSON('../json/storage_rawInventeryView.php',args,function(result){
//console.log('123');
var arr = result;
console.log(arr);//调试数据
//改变颜色专用变量
var markup = true;
var color;
//调整数据的顺序
//循环遍历json,将获取到的数据插入到页面上
$('tbody').empty();
for (var i = 0; i < arr.length ; i++) {
$('tbody').append(' ');
markup = !markup;
if(markup){
color = '#58D5FF';
}else{
color = '#fff';
}
//调整数据的顺序
var turnList = ["RAW_MATERIAL_BATCH_NUMBER_","MATERIAL_NAME_","TOP_LINE","BOTTOM_LINE","NOW_NUMBER","LAST_MOUTH_TAKEOUT","THIS_MOUTH_TAKEIN","THIS_MOUTH_TAKEOUT","LAST_MOUTH_TAKEIN","OWN_ADRESS"];
for(var q = 0;q < turnList.length; q++){
//console.log(turnList[q]);
if(arr[i][turnList[q]]=='是'){
var tdHtml = '合格 ';
}else if(arr[i][turnList[q]]=='否'){
var tdHtml = '退货 ';
}else{
var tdHtml = ''+arr[i][turnList[q]]+' ';
}
//console.log(tdHtml);
$('tbody>tr:eq('+i+')').append( tdHtml);
}
}
});
}
}