最近工作需要在原来静态看板（大屏）页面的基础上，实现数据的动态展示，而且需要定时刷新。
接到任务后就马不停蹄的开始修改页面：
显然这个需求最好的解决方法就是用Ajax对后台数据进行定时请求，在前端页面进行刷新
基本的效果是这个样子的：
对后台数据进行遍历，循环展示在表格上。
老实讲，做个Ajax向后端请求数据确实easy,但是刺激的是没有后台交互的模块给我拿来测试，作为实习生的我又不可能招呼其他人来帮助我完成测试。
所以还是得靠自己。
接下来我只能凭借我做博客系统积攒的一些PHP经验写出一个后台模块，独立完成测试工作。
代码如下：
<?php ???//连基础元数据都是我自己拍脑袋模拟出来的，有点崇拜我寄几了呢！ ???$json = ‘{ ???????"data": [ ???????????{ ???????????????"TOP_LINE": 10000, ???????????????"BOTTOM_LINE": 500, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":3000, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "外轮星" ???????????}, ???????????{ ???????????????"TOP_LINE": 30000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 40000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":3000, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "外星轮" ???????????}, ???????????{ ???????????????"TOP_LINE": 50000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 60000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":5121, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "实轴" ???????????}, ???????????{ ???????????????"TOP_LINE": 20000, ???????????????"BOTTOM_LINE": 5000, ???????????????"NOW_NUMBER":3000, ???????????????"THIS_MOUTH_TAKEIN":0, ???????????????"THIS_MOUTH_TAKEOUT":0, ???????????????"LAST_MOUTH_TAKEIN":0, ???????????????"LAST_MOUTH_TAKEOUT":0, ???????????????"RAW_MATERIAL_BATCH_NUMBER_": "SDS-7120", ???????????????"OWN_ADRESS": "GEM", ???????????????"MATERIAL_NAME_": "外星轮" ???????????} ???????], ???????"success": true, ???????"total": 2 ???}‘; ???//Ajax传过来的参数，page是页码，listnum是每页展示的数据条数 ???$page = $_GET[‘page‘]; ???$listNum = $_GET[‘listNum‘]; ???//这个函数蛮重要的json_decode（）；因为实际上$json我们定义的是个String ,这个函数将它转化成json格式的数据 ???$jsondata=json_decode($json); ???//定义头文件，防止乱码 ???header("Content-Type: text/html; charset=UTF-8"); ???//print_r($jsondata); ???//这样我们就可以拿到我们要的数组了 ???$arr = $jsondata->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(‘<tr></tr>‘); ???????????????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 = ‘<td style="word-wrap: break-word;text-align:center;font-size:2.5vw;color:#1DFC8A;" class="ng-binding ng-scope">合格</td>‘; ???????????????????}else if(arr[i][turnList[q]]==‘否‘){ ???????????????????????var tdHtml = ‘<td style="word-wrap: break-word;text-align:center;font-size:2.5vw;color:#F3423C;" class="ng-binding ng-scope">退货</td>‘; ???????????????????}else{ ???????????????????????var tdHtml = ‘<td style="word-wrap: break-word;text-align:center;font-size:2.5vw;color:‘+color+‘;" class="ng-binding ng-scope">‘+arr[i][turnList[q]]+‘</td>‘; ???????????????????} ???????????????????//console.log(tdHtml); ???????????????????$(‘tbody>tr:eq(‘+i+‘)‘).append( tdHtml); ???????????????} ????????????} ???????}); ???} ???}关于PHP处理Json数据的例子
原文地址：https://www.cnblogs.com/amingxiansen/p/9030695.html