jQuery是一個JavaScript庫,AJAX則是一種基于瀏覽器的異步通信技術,可以在不重新加載整個頁面的情況下,更新部分頁面內容。如果在網站上使用了分頁功能,那么就可以使用jQuery AJAX實現滑動分頁效果,提升用戶體驗和頁面速度。
// jQuery AJAX實現滑動分頁 $(function(){ var loading = false;// 防止反復點擊 // 監聽元素滾動 $(window).scroll(function () { var distanceBottom = $(document).height() - $(window).height() - $(window).scrollTop(); // 如果距離底部不足100像素,同時沒有正在加載數據 if (distanceBottom< 100 && !loading) { loading = true;// 正在加載中 $.ajax({ url: 'http://example.com/page' + currentPage + '.html',// 當前頁碼 type: 'GET', dataType: 'html',// 返回值類型 success: function (data) { if (data) { $('#list').append(data);// 追加數據 currentPage++;// 下一頁頁碼 } loading = false;// 加載完成 } }); } }); });
上述代碼使用了$(window).scroll()監聽窗口滾動事件,當滾動距離達到底部100像素以下時,發送Ajax請求,通過追加數據到列表中實現分頁效果。同時,為了防止多次發送請求,使用loading變量進行鎖定,只有當前請求完成后才能發送下一個請求。具體實現時,需要在服務器端提供分頁數據接口,返回對應頁碼的HTML數據。