实例 data.php
<?php
if (isset($_GET['p'])) { //如果$get['p']的值不存在，就不运行下边代码
$page = intval($_GET['p']);
//链接数据库,Dsn格式注意符号
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php', 'root', 'root');
//var_dump($pdo);
//查询要输出的总页码数
$num = 5; //每页显示5条数据
$sql = "SELECT CEIL(COUNT(`mov_id`)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$pages = $stmt->fetchColumn(0);
//var_dump($pages);
//查询要输出的数据,由于限制了一次输出的数据数量，所以可以放心使用fetchAll
//OFFSET 每页的启示位置=偏移量
//偏移量=每页显示的行数*(当前页页码-1)
$offset = $num * ($page - 1);
$sql = "SELECT `mov_id`,`name`, CONCAT(LEFT(`detail`,20),'.............') FROM `movies` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo->prepare($sql);
$stmt->execute();
//while($data = $stmt->fetch(PDO::FETCH_ASSOC)){
// echo json_encode([$pages,$data]);
//}
//
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode([$pages, $data]);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>异步获取数据库数据</title>
<style>
/*设置表格样式*/
table {
/*折叠表格线与单元格之间的间隙*/
border-collapse: collapse;
width: 90%;
}
/*设置表格与单元格边框*/
table, th, td {
border: 1px solid black;
}
/*设置标题行背景色*/
table thead tr:first-of-type {
background-color: lightblue;
}
/*设置每一列的宽度*/
table tbody tr td:nth-of-type(1) {
width: 10%;
}
table tbody tr td:nth-of-type(2) {
width: 20%;
}
table tbody tr td:nth-of-type(3) {
width: 70%;
}
/*设置分页条样式*/
ul {
text-align: center;
}
ul li {
/*去掉默认样式*/
list-style-type: none;
/*转为水平显示*/
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
/*垂直水平居中*/
text-align: center;
line-height: 20px;
cursor: pointer;
margin-left: 5px;
}
ul li:hover {
background-color: lightblue;
border: 1px solid red;
}
/*作业: 如何设置当前页码的高亮?*/
.active {
background-color: lightblue;
border: 1px solid red;
}
</style>
</head>
<body onload="getData(<?php echo $_GET['p'] ?? 1; ?>)">
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<!-- tr*5>td{x}*3-->
</tbody>
</table>
<!--分页条-->
<ul>
</ul>
<script>
function getData(p) {
res = new XMLHttpRequest();
res.onreadystatechange = function () {
if (res.readyState === 4) {
var data = JSON.parse(res.responseText);
// console.log(data[1]);
//添加数据
var tbody = document.getElementsByTagName('tbody')[0];
data[1].forEach(function (value) {
var tr = document.createElement('tr');
for (key in value) {
console.log(value[key]);
var td = document.createElement('td');
td.innerText = value[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
//显示分页条
fyt = document.getElementsByTagName('ul')[0];
for (var i = 1; i <= data[0]; i++) {
li = document.createElement('li');
li.innerText = i;
fyt.appendChild(li);
li.onclick=function () {
var url = location.search.slice(0,3) + this.innerText; //问题：无法从首页访问标签内容
location.replace(url);
}
}
}
};
res.open('GET', 'data.php?p=' + p.toString(), true);
res.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例