當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/18 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS滚动条到网页底部自动加载更多内容小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

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

轉載于:https://my.oschina.net/kt431128/blog/224711

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的JS滚动条到网页底部自动加载更多内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。