使用原生js 通过AJAX发送post请求获取分页数据 上下页
inc中是一个链接数据库文件就不发了。如有需要科浏览本博主上一篇有次文件。
服务器端 get_muslist.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 添加鼠标点击事件翻页
实例
html>
歌曲列表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;}
ID歌曲名歌词下载地址
January$100January$100//获取url参数
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;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+='
';str+='
'+mus["mus_id"]+'';str+='
'+mus["name"]+'';str+='
'+mus["lyric"]+'';str+='
'+mus["mus_url"]+'';str+='
';});
tbody.innerHTML=str;
//.slice(0,20) 可以将对象字符串取前20个
//显示分页
var aaa='';
page.innerHTML="上一页";
for(var i=1;i<=pages;i++){
var active=(i==p)?'active':'';
aaa+=""+i+"";
}
page.innerHTML+=aaa;
page.innerHTML+="下一页";
}
}
function prev () {
p>1?location.search='?p='+(p-=1):"";
}
function next () {
p
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
案例二 通过li 添加鼠标click事件翻页
实例
html>
歌曲列表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;}
ID歌曲名歌词下载地址
January$100January$100//获取url参数
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;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+='
';str+='
'+mus["mus_id"]+'';str+='
'+mus["name"]+'';str+='
'+mus["lyric"]+'';str+='
'+mus["mus_url"]+'';str+='
';});
tbody.innerHTML=str;
//.slice(0,20) 可以将对象字符串取前20个
//显示分页
page.innerHTML="
上一页"for(var i=1;i<=pages;i++){
var active=(i==p)?'active':'';
page.innerHTML+="
"+i+"";}
page.innerHTML+="
下一页"}
}
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
break;
default:
location.search='?p='+ev.target.innerText;
break;
}
}
}
运行实例 »
点击 "运行实例" 按钮查看在线实例