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

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

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

改進(jìn)后的代碼如下，這里用模擬數(shù)據(jù)代替了實(shí)際的AJAX請(qǐng)求，方便理解和測(cè)試：

  <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">點(diǎn)擊我彈窗并加載分類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>

<script src="./jquery.min.js"></script>
<script>
  // 不需要總頁(yè)數(shù)，因?yàn)榭傢?yè)數(shù)是后端返回的，前端不需要知道總頁(yè)數(shù)，只需要知道當(dāng)前頁(yè)碼即可
  // 初始化分類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');
    // 加載對(duì)應(yīng)分類的數(shù)據(jù)
    loadCategoryData(categoryId, currentPage);
  })

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

  // 監(jiān)聽(tīng)滾動(dòng)事件
  $('.tab_item').scroll(function () {
    console.log('scroll...', $('.tab_item').scrollTop(), $('.tab_item').innerHeight())
    if (isLoading) {
      return;
    }
    //  判斷是否滾動(dòng)到底部距離150px 加載更多
    const scrollTop = $(this).scrollTop();
    const scrollHeight = $(this).prop('scrollHeight');
    const containerHeight = $(this).outerHeight();

    if (scrollHeight - scrollTop - containerHeight < 150) {
      // 滾動(dòng)到底部距離小于150px，加載更多數(shù)據(jù)
      currentPage  ;
      if (currentPage <= total) {
        loadPageData(categoryId, currentPage);
      }
    }

  });

  // 模擬個(gè)函數(shù)，用于加載某一頁(yè)的數(shù)據(jù)
  function getData(categoryId, page) {
    console.log('getData...', categoryId, page)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 隨機(jī)返回page條數(shù)據(jù)
        const list = [];
        // 每次返回20條數(shù)據(jù)
        for (var i = 0; i < 20; i  ) {
          list.push({
            title: '分類:'   categoryId   ',標(biāo)題:'   i,
            img_url: 'https://picsum.photos/200/300?random='   i
          });
        }
        resolve({
          list, // 當(dāng)前頁(yè)的數(shù)據(jù)
          page, // 當(dāng)前頁(yè)碼
          totalPages: 100 // 后端返回的總頁(yè)數(shù)
        });
      }, 1000);
    });
  }

  function loadPageData(categoryId, page) {
    // 判斷是否正在加載中
    if (isLoading) {
      return;
    }
    isLoading = true;
    getData(categoryId, page).then(({ list, page, totalPages }) => {
      // 更新總頁(yè)數(shù)
      total = totalPages;
      let html = "";
      for (var i = 0; i < list.length; i  ) {
        html  = '<div><img  src="'   list[i].img_url   '" alt="如何使用JQuery實(shí)現(xiàn)彈窗、AJAX分頁(yè)加載TAB分類數(shù)據(jù)并解決數(shù)據(jù)混雜問(wèn)題？" ><span>"'   list[i].title   '"';
      }
      $(".tab_item").append(html);
    }).finally(() => {
      isLoading = false;
    });
  }
</script>

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

以上是如何使用JQuery實(shí)現(xiàn)彈窗、AJAX分頁(yè)加載TAB分類數(shù)據(jù)并解決數(shù)據(jù)混雜問(wèn)題？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！