如何使用 jQuery 点击按钮弹窗，并通过 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到底部时进行翻页？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何使用 jQuery 点击按钮弹窗，并通过 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到底部时进行翻页？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

如何在 jQuery 中点击按钮弹窗，并使用 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到页底后进行翻页？

对于这个问题，解决方案是：

1. 初始化分类 ID、当前页码和总页数。
2. 监听按钮点击事件，加载第一个分类的数据。
3. 监听选项卡切换事件，切换分类 ID，重新加载第一页数据。
4. 监听选项卡滚动事件，当滚动到底部时，加载下一页数据。
5. 使用 AJAX 请求从后端获取数据，更新选项卡内容。

具体代码实现如下：

// 初始化分类 ID、当前页码和总页数
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');
  // 加载对应分类的数据
  loadCategoryData(categoryId, currentPage);
});

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

// 监听滚动事件
$('.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，加载更多数据
    currentPage++;
    if (currentPage <= total) {
      loadPageData(categoryId, currentPage);
    }
  }
});

function loadPageData(categoryId, page) {
  if (isLoading) {
    return;
  }
  isLoading = true;
  
  $.ajax({
    url: '/ajax.php?mod=tab',
    method: 'POST',
    data: {
      type_id: categoryId,
      page: page
    },
    success: function(response) {
      var obj = JSON.parse(response);
      var html = "";
      for (var i = 0; i < obj.length; i++) {
        html += '<div><img src="' + obj[i].img_url + '"><span>"' + obj[i].title + '"</span></div>';
      }
      $(".tab_item").append(html);
    }
  }).always(function() {
    isLoading = false;
  });
}

注意：

• 上述代码中使用模拟数据（getData），实际业务中，getData 需要替换为实际的 AJAX 请求函数。
• 实际业务中，可能还需要根据需求调整滚动距离阈值（150px）。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 jQuery 点击按钮弹窗，并通过 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到底部时进行翻页？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。