JavaScript~ajax~分页

最新推荐文章于 2021-02-23 20:41:29 发布

qq_35660351

最新推荐文章于 2021-02-23 20:41:29 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax案列文章标签： ajax

本文链接：https://blog.csdn.net/qq_35660351/article/details/78864231

ajax案列专栏收录该内容

4 篇文章

订阅专栏

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






?>