如何在 jquery 中点击按钮弹窗，并使用 ajax 异步加载不同分类 id 的数据，并在每个选项卡滚动到页底后进行翻页？
对于这个问题，解决方案是：
初始化分类 ID、当前页码和总页数。监听按钮点击事件，加载第一个分类的数据。监听选项卡切换事件，切换分类 ID，重新加载第一页数据。监听选项卡滚动事件，当滚动到底部时，加载下一页数据。使用 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 += '@@##@@"' + obj[i].title + '"'; } $(".tab_item").append(html); } }).always(function() { isLoading = false; });}
登录后复制
注意：
上述代码中使用模拟数据（getData），实际业务中，getData 需要替换为实际的 AJAX 请求函数。实际业务中，可能还需要根据需求调整滚动距离阈值（150px）。
以上就是如何使用 jQuery 点击按钮弹窗，并通过 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到底部时进行翻页？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2803813.html
