如何使用JQuery實現彈窗、AJAX分頁加載TAB分類數據並解決數據混雜問題？

JQuery彈窗及AJAX分頁加載TAB分類數據詳解

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

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

改進後的代碼如下，這裡用模擬數據代替了實際的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數據</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">
      <!--分類內容加載區-->
    </div>
  </div>

<script src="./jquery.min.js"></script>
<script>
  // 不需要總頁數，因為總頁數是後端返回的，前端不需要知道總頁數，只需要知道當前頁碼即可// 初始化分類ID currentPage total 
  let categoryId = 1, currentPage = 1, total = 0;
  // 是否加載中let 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;);
    // 加載對應分類的數據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);
  }

  // 監聽滾動事件$(&#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，加載更多數據currentPage ;
      if (currentPage <= total) {
        loadPageData(categoryId, currentPage);
      }
    }

  });

  // 模擬個函數，用於加載某一頁的數據function getData(categoryId, page) {
    console.log(&#39;getData...&#39;, categoryId, page)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 隨機返回page條數據const list = [];
        // 每次返回20條數據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, // 當前頁的數據page, // 當前頁碼totalPages: 100 // 後端返回的總頁數});
      }, 1000);
    });
  }

  function loadPageData(categoryId, page) {
    // 判斷是否正在加載中if (isLoading) {
      return;
    }
    isLoading = true;
    getData(categoryId, page).then(({ list, page, totalPages }) => {
      // 更新總頁數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實現彈窗、AJAX分頁加載TAB分類數據並解決數據混雜問題？" ><span>"&#39; list[i].title &#39;"&#39;;
      }
      $(".tab_item").append(html);
    }).finally(() => {
      isLoading = false;
    });
  }
</script>

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

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