小蚂蚁学习页面静态化（3）——页面静态化中局部动态化案例实现

说白了，其实就用到了一个知识点——ajax。在静态化页面中使用ajax动态获取数据库中的数据，写入到静态化页面中相应的位置即可。虽然这些代码在平时的工作中都写烂了，但我还是决定在博客中重新写一遍，不要问我为什么，周日，不！上！班！呵呵呵呵……

生成静态化页面的脚本

<?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请求的脚本，用于返回数据

<?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代码。

<!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=====(￣▽￣*)b

来源：oschina

链接：https://my.oschina.net/u/1423209/blog/515538

标签

php

页面静态化

局部动态化