JQuery彈窗及AJAX分頁加載TAB分類數(shù)據(jù)詳解

本文將詳細講解如何使用JQuery實現(xiàn)點擊按鈕彈窗，並通過AJAX加載對應TAB分類ID的數(shù)據(jù)，同時在每個TAB滾動到底部時自動加載下一頁數(shù)據(jù)的功能。 問題中提供的代碼存在一個關鍵缺陷：每次點擊TAB時，沒有清除之前的加載數(shù)據(jù)，導致不同TAB的內容混雜在一起。 以下將對代碼進行改進，並說明實現(xiàn)細節(jié)。

首先，我們需要理解問題的核心在於如何正確地管理每個TAB對應的AJAX請求和數(shù)據(jù)。原始代碼的問題在於loadCategoryData函數(shù)中，滾動事件監(jiān)聽器始終作用於同一個.tab_item元素，導致不同分類的數(shù)據(jù)互相干擾。 解決方法是為每個TAB的數(shù)據(jù)加載過程設置獨立的變量和狀態(tài)管理。

改進後的代碼如下，這裡用模擬數(shù)據(jù)代替了實際的AJAX請求，方便理解和測試：

 



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



  <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">
      <!--分類內容加載區(qū)-->
    </div>
  </div>

<script src="./jquery.min.js"></script>
<script>
  // 不需要總頁數(shù)，因為總頁數(shù)是後端返回的，前端不需要知道總頁數(shù)，只需要知道當前頁碼即可// 初始化分類ID currentPage total 
  let categoryId = 1, currentPage = 1, total = 0;
  // 是否加載中l(wèi)et isLoading = false;

  $(document).on(&#39;click&#39;, &#39;.btn&#39;, function () {
    loadCategoryData(categoryId, currentPage);
  })

  $(&#39;.tab_p p&#39;).click(function () {
    currentPage = 1;
    categoryId = $(this).data(&#39;id&#39;);
    // 加載對應分類的數(shù)據(jù)loadCategoryData(categoryId, currentPage);
  })

  function loadCategoryData(id, page) {
    $(".tab_item").html(&#39;加載中...&#39;);
    $(this).addClass(&#39;cur&#39;).siblings().removeClass(&#39;cur&#39;);
    loadPageData(id, page);
  }

  // 監(jiān)聽滾動事件$(&#39;.tab_item&#39;).scroll(function () {
    console.log(&#39;scroll...&#39;, $(&#39;.tab_item&#39;).scrollTop(), $(&#39;.tab_item&#39;).innerHeight())
    if (isLoading) {
      return;
    }
    // 判斷是否滾動到底部距離150px 加載更多const scrollTop = $(this).scrollTop();
    const scrollHeight = $(this).prop(&#39;scrollHeight&#39;);
    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(&#39;getData...&#39;, 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: &#39;分類:&#39; categoryId &#39;,標題:&#39; i,
            img_url: &#39;https://picsum.photos/200/300?random=&#39; 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 = &#39;<div><img  src="&#39; list[i].img_url &#39;" alt="如何使用JQuery實現(xiàn)彈窗、AJAX分頁加載TAB分類數(shù)據(jù)並解決數(shù)據(jù)混雜問題？" ><span>"&#39; list[i].title &#39;"&#39;;
      }
      $(".tab_item").append(html);
    }).finally(() => {
      isLoading = false;
    });
  }
</script>

這段代碼通過isLoading變量避免了重複請求，並使用Promise處理異步操作，保證數(shù)據(jù)加載的順序性和正確性。 同時，通過在滾動事件中判斷距離底部距離來觸發(fā)加載下一頁，提高用戶體驗。 需要注意的是，實際應用中，/ajax.php?mod=tab接口需要根據(jù)實際情況進行替換。 並且，應該在後端返回的數(shù)據(jù)中包含總頁數(shù)信息，以便前端能夠準確判斷是否需要加載下一頁數(shù)據(jù)。

以上是如何使用JQuery實現(xiàn)彈窗、AJAX分頁加載TAB分類數(shù)據(jù)並解決數(shù)據(jù)混雜問題？的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！