收藏
批改状态：合格
老师批语：还是补之前的作业呢, 建议之前的作业先放放, 尽可能跟上进度, 否则二头都顾不上, 之前的作业 , 可以放在双休日集中完成
使用原生js 通过AJAX发送post请求获取分页数据 上下页
inc中是一个链接数据库文件就不发了。如有需要科浏览本博主上一篇有次文件。
服务器端 get_muslist.php 单个文件返回数据
<?php
//链接数据库
require __DIR__.'/inc/connect.php';
//获取当前页码
$page=intval($_GET['p']??1);
//每页显示的数量 如果未定义使用默认
$num=$_GET['num']??3;
//查询sql语句模板
$sql="SELECT CEIL(COUNT(*)/{$num}) FROM `musics` ";
//创建预处理对象
$stmt=$pdo->prepare($sql);
//执行语句
$stmt->execute();
//获取第一列的值
$pages=$stmt->fetchColumn(0);
//计算出 偏移量 = 每页显示数量 *（当前页数-1）
$offset=$num * ($page-1);
//获取分页数据 如果给字段使用了LTFT截取 就要as一个新字段名 数据库函数CONCAT(obj,'可以追加字符串') 可以
$sql="SELECT `mus_id`,`name`,CONCAT(LEFT(`lyric`,50),'......') AS `lyric`,`mus_url` FROM `musics` LIMIT {$num} OFFSET {$offset} ";
$stmt=$pdo->prepare($sql);
$stmt->execute();
$musics=$stmt->fetchAll(PDO::FETCH_ASSOC);
//将数据库查询结果转json字符串 返回到前端
echo json_encode(['musics'=>$musics,'pages'=>$pages]);
//退出 防止意外代码输出
exit;点击 "运行实例" 按钮查看在线实例
小案例一 通过li 添加鼠标点击事件翻页
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>歌曲列表</title>
<style type="text/css">
table{background: #7584B3;}
table td{background: #FFFFFF; padding: 8px;}
table th{padding: 10px; color: #FFFFFF;}
.muslist{width: 600px;margin: 16px auto;}
.page{text-align: center; margin: 15px;}
.page a{list-style: none; border: 1px solid #008B8B;color: #008B8B;
display: inline-block; padding: 3px 8px; margin: 5px;text-decoration: none;}
.page a:hover,.page .active{background:#008B8B; color: #FFFFFF;}
</style>
</head>
<body>
<div class="muslist">
<table border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<th width="40">ID</th>
<th width="100">歌曲名</th>
<th>歌词</th>
<th>下载地址</th>
</tr>
</thead>
<!--<tfoot>
<tr>
<td>占位符</td>
<td>占位符</td>
<td>占位符</td>
<td>占位符</td>
</tr>
</tfoot>-->
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
<div class="page">
</div>
</div>
<script type="text/javascript">
//获取url参数
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
//获得表格的显示区域 tbody
var tbody = document.querySelector('.muslist tbody');
//获取显示分页的标签
var page = document.querySelector('.page');
//获取当前页码参数 先判断是否存在 在判断是否是整数
// var p =<?php //echo isset($_GET['p']) ? $_GET['p'] : 1 ?>
//js获取url参数
var p = getQueryVariable('p')===false ? 1:Number(getQueryVariable('p'));
//创建ajax对象
var XHR=new XMLHttpRequest();
//监听窗口载入事件
window.addEventListener('load',showData,false);
//load事件的方法
function showData () {
//测试下 我靠 函数名写错一个字母 不要像老师那样注释多行麻烦 直接return终止方便
// alert(123);return false;
//创建ajax监听回调
XHR.addEventListener('readystatechange',getData,false);
//配置请求
XHR.open('GET','get_muslist.php?p='+p,true);
//发送请求
XHR.send(null);
}
function getData () {
if (XHR.readyState===4) {
console.log(XHR.responseText);
//1 获取字符串
var obj=JSON.parse(XHR.responseText);
pages=obj['pages'];
var musics=obj['musics'];
var str='';
musics.forEach(function (mus,index) {
str+='<tr>';
str+='<td>'+mus["mus_id"]+'</td>';
str+='<td>'+mus["name"]+'</td>';
str+='<td>'+mus["lyric"]+'</td>';
str+='<td>'+mus["mus_url"]+'</td>';
str+='</tr>';
});
tbody.innerHTML=str;
//.slice(0,20) 可以将对象字符串取前20个
//显示分页
var aaa='';
page.innerHTML="<a onclick='prev()'>上一页</a>";
for(var i=1;i<=pages;i++){
var active=(i==p)?'active':'';
aaa+="<a class='"+active+"' href='show-a.html?p="+i+"'>"+i+"</a>";
}
page.innerHTML+=aaa;
page.innerHTML+="<a onclick='next()'>下一页</a>";
}
}
function prev () {
p>1?location.search='?p='+(p-=1):"";
}
function next () {
p<pages ? location.search='?p='+(p+=1) : "";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
案例二 通过li 添加鼠标click事件翻页
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>歌曲列表</title>
<style type="text/css">
table{background: #7584B3;}
table td{background: #FFFFFF; padding: 8px;}
table th{padding: 10px; color: #FFFFFF;}
.muslist{width: 600px;margin: 16px auto;}
.page{color: #008B8B;;}
.page li{list-style: none; border: 1px solid #008B8B;
display: inline-block; padding: 3px 8px; margin: 5px;}
.page li:hover,.active{background:#008B8B; color: #FFFFFF;}
</style>
</head>
<body>
<div class="muslist">
<table border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<th width="40">ID</th>
<th width="100">歌曲名</th>
<th>歌词</th>
<th>下载地址</th>
</tr>
</thead>
<!--<tfoot>
<tr>
<td>占位符</td>
<td>占位符</td>
<td>占位符</td>
<td>占位符</td>
</tr>
</tfoot>-->
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
<div class="page">
<ul>
</ul>
</div>
</div>
<script type="text/javascript">
//获取url参数
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
//获得表格的显示区域 tbody
var tbody = document.querySelector('.muslist tbody');
//获取显示分页的标签
var page = document.querySelector('.page ul');
//获取当前页码参数 先判断是否存在 在判断是否是整数
// var p =<?php //echo isset($_GET['p']) ? $_GET['p'] : 1 ?>
//js获取url参数
var p = getQueryVariable('p')===false ? 1:Number(getQueryVariable('p'));
//创建ajax对象
var XHR=new XMLHttpRequest();
//监听窗口载入事件
window.addEventListener('load',showData,false);
//load事件的方法
function showData () {
//测试下 我靠 函数名写错一个字母 不要像老师那样注释多行麻烦 直接return终止方便
// alert(123);return false;
//创建ajax监听回调
XHR.addEventListener('readystatechange',getData,false);
//配置请求
XHR.open('GET','get_muslist.php?p='+p,true);
//发送请求
XHR.send(null);
}
function getData () {
if (XHR.readyState===4) {
console.log(XHR.responseText);
//1 获取字符串
var obj=JSON.parse(XHR.responseText);
pages=obj['pages'];
var musics=obj['musics'];
var str='';
musics.forEach(function (mus,index) {
str+='<tr>';
str+='<td>'+mus["mus_id"]+'</td>';
str+='<td>'+mus["name"]+'</td>';
str+='<td>'+mus["lyric"]+'</td>';
str+='<td>'+mus["mus_url"]+'</td>';
str+='</tr>';
});
tbody.innerHTML=str;
//.slice(0,20) 可以将对象字符串取前20个
//显示分页
page.innerHTML="<li>上一页</li>"
for(var i=1;i<=pages;i++){
var active=(i==p)?'active':'';
page.innerHTML+="<li class='"+active+"'>"+i+"</li>";
}
page.innerHTML+="<li>下一页</li>"
}
}
page.addEventListener('click',set_page,false);
function set_page (ev) {
if (ev.target.nodeName==='LI') {
switch (ev.target.innerText){
case '上一页':
p>1?location.search='?p='+(p-=1):"";
break;
case '下一页':
p<pages ? location.search='?p='+(p+=1) : "";
break;
default:
location.search='?p='+ev.target.innerText;
break;
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
