文章来源：(数据懒加载案例)[https://www.freesion.com/article/47051092126/]
思路：滑动滚轮，当每次页面滚动条滑动至底部加载一定数量的数据。
conn.php 是连接数据库的文件
首先，在MySQL数据库创建了300条数据
addItem.php
<?php
include "./conn.php";
//在数据库中创建300条数据
for($i=0;$i<300;$i++){
$sql="INSERT INTO `product`( `title`, `price`, `num`, `pic`, `details`) VALUES ('test$i','100',20,'./images/$i.jpg','xxxxxx')";
$conn->query($sql);
}
$conn->close();
?>
后端接收到前端发送过来的page数据进行数据库操作
getpage.php
<?php
include "./conn.php";
$currentPage=$_REQUEST['page'];// 当前页数
$pageSize=20;// 每一次查询的数据数量
$stratRow=($currentPage-1)*$pageSize;
$sql="select * from product limit $stratRow,$pageSize";
$res=$conn->query($sql);
$arr=array();
while($row=$res->fetch_assoc()){
array_push($arr,$row);//将返回的结果集放入数组
}
$json=json_encode($arr);
echo $json;
$conn->close();//关闭数据库
?>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
//采用闭包的写法来存储p的值
var page=(function(){
var p=1;
return {
get:function(){
return p;
},
plus:function(){
p++;
}
}
})();
getData();//先触发一次加载数据的函数，先让页面中显示20条数据
//1.思考：什么时候加载数据?
//当滚动条拉到底部 加载数据
$(window).on('scroll resize',function(){
// 2.思考：如何判断滚动条拉到了底部
// 滚动条已滚动的距离+窗口高度 === 文档高度
let $scrollTop=$(window).scrollTop();//滚动条已滚动的距离
let $documentHeight=$(document).height();//文档高度
let $windowHeight=$(window).height();//窗口高度
if($scrollTop+$windowHeight===$documentHeight){//滚动条拉到底部时
page.plus();//页数进行+1
getData();//加载数据
}
})
function getData(){
//发送ajax请求 加载数据
$.ajax({
type:'get',
url:'../interface/getpage.php',
data:{
page:page.get()
},
dataType:'json',
success:function(res){//请求到的res是一个数组
//为什么要进行res.length的判断?
//因为当数据全部加载完成，拖动滚动条至顶部，还是会发送ajax给后端去请求数据
//所以当请求到的res数组长度为0时，即无数据时，移除滚轮事件，终止ajax请求数据
if(res.length){
res.forEach(elm=>{
$('tbody').append(`
<tr>
<td>${elm.sid}</td>
<td>${elm.title}</td>
<td>${elm.price}</td>
<td>${elm.num}</td>
<td>${elm.pic}</td>
<td>${elm.details}</td>
</tr>
`);
});
}else{
$('tbody').append(`<tr><td colspan="6">没有更多的数据了...</td></tr>`);
$(window).off('scroll resize');
}
}
})
}
})
</script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover text-center">
<thead>
<caption class="text-center h3">商品信息表</caption>
<tr>
<td>id</td>
<td>title</td>
<td>price</td>
<td>num</td>
<td>pic</td>
<td>details</td>
</tr>
</thead>
</table>
</div>
</body>
</html>
网友评论