JavaScript~ajax~分页

来源：互联网发布：mac系统安装软件编辑：程序博客网时间：2024/05/18 01:16
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>分页获取数据</title><style>body{padding:50px;}ul{list-style: none;padding:0;margin:0;}/*reset*/#datalist{border:1px solid #ddd;padding:15px;}#datalist li{padding:15px 5px;border-bottom:1px dotted #ccc;}#datalist li h4{margin:0;}#page span{display:inline-block;margin:5px;width:40px;line-height:1.8;text-align: center;background-color:#dfdfdf;color:#666;}#page span.active{background-color:#fc0;color:#fff;}</style><script>document.addEventListener('DOMContentLoaded',function(){/*思路：* 1）ajax获取数据* 2）生成html* 3) total/qty生成页面* 4) 点击页面重新发送请求*///获取元素节点var datalist = document.querySelector('#datalist');var page = document.querySelector('#page');// 信息显示数码 页面var pageNo = 1;var qty = 5;//1、创建一个异步对象var xhr = new XMLHttpRequest();//4、返回数据xhr.onreadystatechange = function(){if(xhr.readyState ===4){// 获取xhr返回的数据  将字符串装换成数组，拼接转成字符串var res = JSON.parse(xhr.responseText);// console.log(res)var ul = document.createElement('ul');ul.innerHTML = res.data.map(function(item){return `<li><h4>${item.name}</h4><p>${item.content}</p></li>`}).join('');// 添加前先清空datalist.innerHTML = '';datalist.appendChild(ul);// 分页获取数据var page_len = Math.ceil(res.total/qty);//生成span 页码for($i=0;$i<page_len;$i++){var span = document.createElement('span');span.innerText = $i+1;if ($i+1===pageNo) {span.className = 'active';};page.appendChild(span)}}//点击时候切换页码page.onclick = function(e){page.innerHTML = '';e = e|| window.event;var target = e.target ||e.srcElement;if(target.tagName.toLowerCase()==='span'){pageNo = e.target.innerText*1;//2、创建连接xhr.open('get',`api/football2.php?pageNo=${pageNo}&qty=${qty}`,true);//3、发送请求xhr.send();}}}//2、创建连接xhr.open('get',`../api/football2.php?pageNo=${pageNo}&qty=${qty}`,true);//3、发送请求xhr.send();});</script></head><body><div id="datalist"></div><div id="page"></div></body></html><?php$pageNo = isset($_REQUST['pageNo'])?$_REQUST['pageNO']:1;$qty = isset($_REQUST['$qty'])?$_REQUST['$qty']:10;//读取文件$file_path = 'data/football.json';$file = fopen($file_path,'r');//读取文件的长度$content = fread($file,filesize($file_path));$arr = json_decode($content);$res = array('data' => array_slice($arr,($pageNo-1)*$qty,$qty),'total' => count($arr),'pageNo' => $pageNo,'qty' => $qty);echo json_encode($res)// echo json_encode($res,JSON_UNESCAPED_UNICODE)?>
阅读全文
0 0