PHP实现页面静态化——局部动态化

最新推荐文章于 2023-10-06 22:54:19 发布

葡萄干是个程序员

最新推荐文章于 2023-10-06 22:54:19 发布

阅读量3.5k

点赞数 1

分类专栏： PHP 文章标签： php 页面静态化局部动态化

本文链接：https://blog.csdn.net/qq_15096707/article/details/50810091

版权

PHP 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

上回说到：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请求获取动态数据，并进行显示。

结果如下：

目录结构：

页面显示：

葡萄干是个程序员

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
PHP实现页面静态化——局部动态化

上回说到：PHP实现页面静态化——全部纯静态化这次实现PHP的局部动态化，也就是说静态化的页面存在“动态”过程，结合全部静态化技术+Ajax技术实现局部动态化，局部更新页面。在上文的数据库基础上，在创建表 hit，如下：并插入几条数据，如下：案例demo02的目录结构：为实现局部静态
复制链接

扫一扫