7.29 原生js 通过AJAX发送post请求分页翻页 - PHP&MYSQL

inc中是一个链接数据库文件就不发了。如有需要科浏览本博主上一篇有次文件。

实例

<?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;

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：还是补之前的作业呢, 建议之前的作业先放放, 尽可能跟上进度, 否则二头都顾不上, 之前的作业 , 可以放在双休日集中完成

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例