页面数据懒加载

最新推荐文章于 2025-05-13 11:49:48 发布

原创最新推荐文章于 2025-05-13 11:49:48 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

数据懒加载专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个数据懒加载的实现案例，通过前后端交互，实现滚动加载更多数据的效果，使用PHP处理MySQL数据库，配合jQuery和Bootstrap完成前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据懒加载案例：
思路：滑动滚轮，当每次页面滚动条滑动至底部加载一定数量的数据。

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>

在这里插入图片描述