小螞蟻學習頁面靜態化（3）——頁面靜態化中局部動態化案例實現

時間 2019-11-06

原文原文鏈接

說白了，其實就用到了一個知識點——ajax。在靜態化頁面中使用ajax動態獲取數據庫中的數據，寫入到靜態化頁面中相應的位置便可。雖然這些代碼在平時的工做中都寫爛了，但我仍是決定在博客中從新寫一遍，不要問我爲何，週日，不！上！班！呵呵呵呵……javascript

生成靜態化頁面的腳本php

<?php
//首先判斷是否有靜態文件，而且文件的最新修改時間到如今是否大於20秒
if(is_file('./text.php') && time()-filemtime('./text.php') <= 20){
    //條件成立，將已經生成的靜態文件輸出給用戶
    include_once('./jingtai.php');
}else{
        //條件不成立，從新走數據庫，獲取數據，分配模板，輸出內容
    $arr    =   array(
            0=>array('title'=>'這裏是第一個標題'),
            1=>array('title'=>'這裏是第二個標題'),
            2=>array('title'=>'這裏是第三個標題'),
            3=>array('title'=>date('Y-m-d H:i:s'))
        );
     
        //緩衝區必需要在輸出以前開啓
    ob_start();
    //輸出模板
    include_once('./template.php');
        //輸出內容的同時生成靜態文件，注意使用的函數是ob_get_contents();
    file_put_contents('./jingtai.php', ob_get_contents());
}
?>

2.準備一個ajax請求的腳本，用於返回數據html

<?php 
	//去數據庫中拿到一個二維數組
	$arr	=	array(
			0=>array('title'=>'動態獲取的第一個標題'),
			1=>array('title'=>'動態獲取的第二個標題'),
			2=>array('title'=>'動態獲取的第三個標題'),
			3=>array('title'=>date('Y-m-d H:i:s'))
		);
	//把獲取到的數組返回
	show($code=1,$arr);

	function show($code=0,$data=null){
		//拼接成一個數組，code表示狀態碼，data是數據
		$msg=array(
				'code'=>$code,
				'data'=>$data
			);
		//json化以後返回數據
		echo json_encode($msg);
	}
?>

3.準備一個模板文件，引入jQuery文件，使用jQuery來實現ajax很是的簡單，寫入ajax代碼。java

<!doctype html>
<html>
	<head>
		<meta charset='utf-8' />
		<script src="./jquery-1.6.4.min.js" type="text/javascript"></script>		
		<title>
			
		</title>
	</head>
	<body>
		<ul>
			<?php foreach ($arr as $key => $value) { ?>
                <li><?php echo $value['title'] ?></li>
            <?php } ?>
		</ul>
		<ul id='ajax'>
			
		</ul>
		<script>
			//使用ajax
			$.ajax({
				type:'POST',
			    url: "./text.php",
			    dataType:'json',
			    success: function(result){
			    	//根據code的值能夠在這裏作一些判斷，讓程序更健壯。	
			    	//準備一個空的字符串
			    	var html='';
			    	//遍歷data的值
			    	$.each(result.data,function(key,value){
			    		//拼接出來須要的數據
			    		html +='<li>'+value.title+'</li>';	
			    	});
			    	//把拼接出來的字符串，寫入到ul中，這就ok了
			    	$('#ajax').html(html);
			  }
			});
		</script>
	</body>
</html>

OK，搞定 d=====(￣▽￣*)bjquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。