JS滚动条到网页底部自动加载更多内容

最新推荐文章于 2024-05-13 08:47:21 发布

kt431128

最新推荐文章于 2024-05-13 08:47:21 发布

阅读量323

点赞数

分类专栏： java web 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/kt431128/article/details/84495088

版权

java web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<html> <head> <meta charset="gb18030" />
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script>
        var totalheight = 0;
        function loadData(){
            totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());

            if ($(document).height() <= totalheight) {  // 说明滚动条已达底部
                /*这里使用Ajax加载更多内容*/
                var container = $("#container"); // 加载容器
                var data = {}; // 查询参数
                // 当前页
                var currentPage = parseInt(container.find('#currentPage').val());
                // 总页数
                var maxPage = parseInt(container.find('#maxPage').val());
                // 查询日期范围
                var startDate = container.find('#startDate').val());
                var endDate = container.find('#endDate').val());
                data.currentPage = currentPage;
                data.maxPage = maxPage;
                data.startDate =startDate;
                data.endDate = endDate;
                jQuery.ajax({
                    type:"POST",
                    url: "/servlet/query.do",
                    data:data,
                    dataType: "json",
                    beforeSend: function(XMLHttpRequest){
                        $("#loading").css('display','');
                    }, success:function(response) {
                        if(response.data){
                            for(var i=0, length = response.data.length; i<length; i++){
                                var html = response.data[i];
                                var test = $(html);
                                container.append(test);
                            }
                            container.find('#currentPage').val(parseInt(currentPage)+1));
                            $("#loading").css('display','none');
                        }
                    }, error:function(){
                        alert("加载失败");
                    }
                });
            }
        }
        $(window).scroll( function() {
            loadData();
        });
    </script>
</head>
<body>
    <div id="container">
        这里显示内容
    </div>
    <div id='loading'>
        <img src="./imgs/loading.gif"/>
    </div>
</body>
</html>