jquery彈窗及ajax分頁加載tab分類數(shù)據(jù)詳解
本文將詳細講解如何使用JQuery實現(xiàn)點擊按鈕彈窗，并通過AJAX加載對應TAB分類ID的數(shù)據(jù)，同時在每個TAB滾動到底部時自動加載下一頁數(shù)據(jù)的功能。 問題中提供的代碼存在一個關鍵缺陷：每次點擊TAB時，沒有清除之前的加載數(shù)據(jù)，導致不同TAB的內(nèi)容混雜在一起。 以下將對代碼進行改進，并說明實現(xiàn)細節(jié)。
首先，我們需要理解問題的核心在于如何正確地管理每個TAB對應的AJAX請求和數(shù)據(jù)。原始代碼的問題在于loadCategoryData函數(shù)中，滾動事件監(jiān)聽器始終作用于同一個.tab_item元素，導致不同分類的數(shù)據(jù)互相干擾。 解決方法是為每個TAB的數(shù)據(jù)加載過程設置獨立的變量和狀態(tài)管理。
改進后的代碼如下，這里用模擬數(shù)據(jù)代替了實際的AJAX請求，方便理解和測試：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab_p { display: flex; } .tab_item { height: 300px; overflow: auto; } .tab_item img { height: 50px; object-fit: cover; } </style> </head> <body> <div class="btn">點擊我彈窗并加載分類1數(shù)據(jù)</div> <div class="tab_p"> <p data-id="1">分類1</p> <p data-id="2">分類2</p> <p data-id="3">分類3</p> </div> <div class="tab_content"> <div class="tab_item"> <!--分類內(nèi)容加載區(qū)--> </div> </div> </body> <script src="./jquery.min.js"></script> <script> // 不需要總頁數(shù)，因為總頁數(shù)是后端返回的，前端不需要知道總頁數(shù)，只需要知道當前頁碼即可 // 初始化分類ID currentPage total let categoryId = 1, currentPage = 1, total = 0; // 是否加載中 let isLoading = false; $(document).on('click', '.btn', function () { loadCategoryData(categoryId, currentPage); }) $('.tab_p p').click(function () { currentPage = 1; categoryId = $(this).data('id'); // 加載對應分類的數(shù)據(jù) loadCategoryData(categoryId, currentPage); }) function loadCategoryData(id, page) { $(".tab_item").html('加載中...'); $(this).addClass('cur').siblings().removeClass('cur'); loadPageData(id, page); } // 監(jiān)聽滾動事件 $('.tab_item').scroll(function () { console.log('scroll...', $('.tab_item').scrollTop(), $('.tab_item').innerHeight()) if (isLoading) { return; } // 判斷是否滾動到底部距離150px 加載更多 const scrollTop = $(this).scrollTop(); const scrollHeight = $(this).prop('scrollHeight'); const containerHeight = $(this).outerHeight(); if (scrollHeight - scrollTop - containerHeight < 150) { // 滾動到底部距離小于150px，加載更多數(shù)據(jù) currentPage++; if (currentPage <= total) { loadPageData(categoryId, currentPage); } } }); // 模擬個函數(shù)，用于加載某一頁的數(shù)據(jù) function getData(categoryId, page) { console.log('getData...', categoryId, page) return new promise((resolve, reject) => { setTimeout(() => { // 隨機返回page條數(shù)據(jù) const list = []; // 每次返回20條數(shù)據(jù) for (var i = 0; i < 20; i++) { list.push({ title: '分類:' + categoryId + ',標題:' + i, img_url: 'https://picsum.photos/200/300?random=' + i }); } resolve({ list, // 當前頁的數(shù)據(jù) page, // 當前頁碼 totalPages: 100 // 后端返回的總頁數(shù) }); }, 1000); }); } function loadPageData(categoryId, page) { // 判斷是否正在加載中 if (isLoading) { return; } isLoading = true; getData(categoryId, page).then(({ list, page, totalPages }) => { // 更新總頁數(shù) total = totalPages; let html = ""; for (var i = 0; i < list.length; i++) { html += '<div>@@##@@<span>"' + list[i].title + '"</span></div>'; } $(".tab_item").append(html); }).finally(() => { isLoading = false; }); } </script> </html>
這段代碼通過isLoading變量避免了重復請求，并使用Promise處理異步操作，保證數(shù)據(jù)加載的順序性和正確性。 同時，通過在滾動事件中判斷距離底部距離來觸發(fā)加載下一頁，提高用戶體驗。 需要注意的是，實際應用中，/ajax.php?mod=tab接口需要根據(jù)實際情況進行替換。 并且，應該在后端返回的數(shù)據(jù)中包含總頁數(shù)信息，以便前端能夠準確判斷是否需要加載下一頁數(shù)據(jù)。
? 版權聲明
文章版權歸作者所有，未經(jīng)允許請勿轉載。
THE END
