对之前项目进行整改，实现通过点击按钮，利用ajax获取数据库栏目信息，和获取栏目的详细列表信息，并实现分页功能。
1、首页代码 index.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/header.css">
<link rel="stylesheet" href="../static/css/footer.css">
<link rel="stylesheet" href="../static/css/about.css">
<title>首页</title>
<style>
.btn{
margin: 20px;
font-size: 16px;
}
.tab{
width: 1000px;
margin: 0px auto;
overflow: hidden;
display: none;
}
.tab table{
width: 1000px;
/*order-collapse 属性设置表格的边框是否被合并为一个单一的边框，*/
border-collapse: collapse;
}
.tab th,td{
border: 1px solid black;
text-align: center;
}
.tab thead>tr{
background-color: #00F7DE;
}
.ulpage,li{
padding: 0;
margin: 5px auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.ulpage li{
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
margin-left: 3px;
}
.ulpage li:hover{
background-color: #00F7DE;
cursor: pointer;
}
.tab .active{
background-color: #00F7DE;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="index.html">首页</a></li>
</ul>
</div>
</div>
<button class="btn">获取栏目</button>
<br>
<button class="btn">获取所有信息列表</button>
<!--中间-->
<div class="main">
</div>
<br>
<div class="tab">
<table>
<caption>信息列表</caption>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>详情</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul class="ulpage">
</ul>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">©版权所有</a>
</p>
</div>
</div>
<script>
var btn1=document.getElementsByClassName('btn')[0];
var btn2=document.getElementsByClassName('btn')[1];
var tab=document.getElementsByClassName('tab')[0];
// 获取表格显示区
var tbody=document.getElementsByTagName('tbody')[0];
// 获取页码显示区
var ul=document.getElementsByClassName('ulpage')[0];
//获取总页数
var pages='';
//当前页码
var p=1;
p=parseInt(p);
// 创建 Ajax对象
var request=new XMLHttpRequest();
btn1.addEventListener('click',getNav,false);
btn2.addEventListener('click',show,false);
function show() {
tab.style.display='block';
showData(p);
}
function showData(page){
request.addEventListener('readystatechange',getData,false);
request.open('GET','get_detail.php?p='+page,true);
request.send(null);
}
function getData() {
if(request.readyState===4){
var obj=JSON.parse(request.responseText);
// console.log(obj);
pages=obj['pages'];
var details=obj['details'];
// 生成表格数据
var str="";
details.forEach(function (detail) {
str+='<tr>';
str+='<td>'+detail['detail_id']+'</td>';
str+='<td>'+detail['name']+'</td>';
str+='<td>'+detail.detail+'</td>';
str+='</tr>';
});
tbody.innerHTML=str;
//判断分页控件有没有出现，防止重复出现
if(ul.children.length=='0'){
createPage();
}else{
for(var i=1;i<=pages;i++){
// 设置当前页码是否高亮?
if(p==i){
ul.children[i].classList.add('active');
}else{
ul.children[i].classList.remove('active');
}
}
}
}
}
function createPage() {
ul.innerHTML+="<li id='prev'>«</li>";
for(var i=1;i<=pages;i++){
var active=(i==1)?'active':'';
ul.innerHTML+='<li class="'+active+'">'+i+'</li>';
}
ul.innerHTML+="<li id='next'>»</li>";
}
// 给页码添加点击事件
ul.addEventListener('click',set_page,false);
function set_page(ev) {
if(ev.target.id==='prev'&&p>1){
p--;
}
if(ev.target.id==='next'&&p<pages){
p++;
}
if(ev.target.id===''){
p=parseInt(ev.target.innerText);
}
showData(p);
}
function getNav(ev) {
request.addEventListener('readystatechange',callback,false);
request.open('GET','get_nav.php',true);
request.send(null);
// 从当前按钮上移除点击事件, 防止重复点击
ev.target.removeEventListener('click',getNav,false);
}
function callback() {
if(request.readyState===4){
var data=JSON.parse(request.responseText);
// console.log(data);
var div=document.getElementsByClassName('main')[0];
data.forEach(function (index) {
var str='';
var main1=document.createElement('div');
main1.classList.add('main-1');
str+='<img src="../static/images/'+index['image']+'" alt="" width="200" >';
str+='<h4><a href="">'+index['alias']+'</a></h4><hr align="left">';
main1.innerHTML=str;
div.appendChild(main1);
});
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、获取栏目代码：get_nav.php
实例
<?php require __DIR__.'/db/connect.php'; $sql='select * from `nav`'; $stmt=$pdo->prepare($sql); $stmt->execute(); $result=$stmt->fetchAll(PDO::FETCH_ASSOC); //echo '<pre>'.print_r($result,true); echo json_encode($result);
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、获取刚刚栏目的详细信息并获取分页数据代码：get_detail.php
实例
<?php
require __DIR__.'/db/connect.php';
$page=intval(isset($_GET['p'])?$_GET['p']:1);
// 每页显示数量
$num=2;
// 总页数: 需要分二步, 第一求出总记录数量, 第二总记录数量除以每页显示的记录数量,再向上取整
$sql="select ceil(count(`detail_id`)/{$num}) from `details`";
$stmt=$pdo->prepare($sql);
$stmt->execute();
$pages=$stmt->fetchColumn(0);//fetchColumn — 从结果集中的下一行返回单独的一列
// 每页的显示起止位置: 偏移量
// 偏移量 = 当前显示数量 * (当前页码 - 1)
$offset=$num*($page-1);
// left(str, length):从左开始截取字符串
//CONCAT（）函数用于将多个字符串连接成一个字符串
$sql="select `detail_id`,`name`,concat(left(`detail`,30),'...') as `detail` from `details` limit {$num} offset {$offset}";
$stmt=$pdo->prepare($sql);
$stmt->execute();
$details=$stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['pages'=>$pages,'details'=>$details]);运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
获取栏目：
获取栏目详细信息列表：
整体页面：
总结：
通过对老师的代码进行整改，分页功能整改地方：
首页使用HTML文件，初始化当前页码p值为1，通过点击分页按钮实现p值的改变。
修改使用“location.search = '?p=' +p;”方法。通过重新加载showData(p)函数，传递p值，进行ajax数据获取和改变，这样就不会出现当点击分页按钮时，出现URL变化导致页面重新加载的情况。
因为不改变URL，重新加载showData(p)函数，就会重新进行ajax请求，获取新的请求数据，如果按照老师的代码，就会导致因为重复进行ajax请求，导致重复出现分页列表，所以要就是否已经出现分页列表进行判断，当ul没有子元素时，在生成分页列表，如果存在，则不生成。同时也需要重新修改分页页码高亢的代码。
