關於PHP處理Json數據的例子

最近工作需要在原來靜態看板（大屏）頁面的基礎上，實現數據的動態展示，而且需要定時刷新。
接到任務后就馬不停蹄的開始修改頁面：
顯然這個需求最好的解決方法就是用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);
				} 
			}
		});
	}

	
}