php采集文章获取链接ajax翻页,7.29 原生js 通过AJAX发送post请求分页翻页

使用原生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;

}

}

}

运行实例 »

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