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：还是补之前的作业呢, 建议之前的作业先放放, 尽可能跟上进度, 否则二头都顾不上, 之前的作业 , 可以放在双休日集中完成