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

来源：互联网发布：桥接模式java类图编辑：程序博客网时间：2024/05/17 21:44
<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>