PHP实现页面静态化——局部动态化
上回说到：PHP实现页面静态化——全部纯静态化
这次实现PHP的局部动态化，也就是说静态化的页面存在“动态”过程，结合全部静态化技术+Ajax技术实现局部动态化，局部更新页面。
在上文的数据库基础上，在创建表 hit，如下：
并插入几条数据，如下：
案例demo02的目录结构：
为实现局部静态化，需要结合Ajax技术。当访问主页index.php时，根据静态页面的缓存时效，判断是否生成index.shtml静态页面，当静态页面返回后静态页面中的js发起Ajax请求，获取服务器中的数据，进行动态更新。那么这里就需要一个 服务器文件 接口，响应Ajax请求。
接口文件 hot.php
<?php
//排行榜接口数据
//1、获取数据 2、把我们获取到的数据组装成接口数据提供通信
require_once('../db.php');
$connect = Db::getInstance()->connect();
$sql = "SELECT * FROM hit AS a join news AS b ON a.news_id = b.id ORDER BY a.count DESC LIMIT 3";
$result = mysql_query($sql, $connect);
while($row = mysql_fetch_assoc($result)) {
$res[] = $row;
}
//print_r($res);
show(1, 'success', $res);
function show($code = 0, $message = 'error', $data = array()) {
$result = array(
'code' => $code,
'message' => $message,
'data' => $data
);
echo json_encode($result);
}
?>
联表查询数据库，并已json格式返回。
模板templates/singwa.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻中心</title>
<link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">
<script src="public/js/jquery-1.7.min.js"></script>
</head>
<body>
<div class="container">
<div class="newslist">
<h3>新闻列表</h3>
<ul class="list-group">
<?php foreach ($news as $key => $value) { ?>
<li class="list-group-item"><a href="#"><?php echo $value['title'];?></a></li>
<?php } ?>
</ul>
</div>
<div class="hot-rank">
<h3>今日排行</h3>
<ul id="hot_html" class="list-group">
</ul>
</div>
</div>
<script src="public/js/hot.js"></script>
</body>
</html>
hot.js 发送Ajax请求，获取动态数据，动态显示数据。
$.ajax({
url:'api/hot.php',
type: 'get',
dataType: 'json',
error: function() {
alert('请求错误');
},
success: function(result) {
if(result.code == 1) {
var html = '';
$.each(result.data, function(key, value) {
//console.log(key + ' ' + value.title);
html += '<li class="list-group-item"><a href="#">' + value.title + '</a></li>';
});
//console.log(html);
$("#hot_html").html(html);
} else {
alert('请求失败');
}
}
});
当第一次访问 index.php （index.php文件不做修改，与上文一致），服务器会根据模板singwa.php生成对应的静态文件index.shtml，将index.shtml文件发回客户端。客户端得到index.shtml文件后，又一次向服务器发送Ajax请求获取动态数据，并进行显示。
结果如下：
目录结构：
页面显示：
