jquery实现弹窗ajax翻页tab数据加载
点击按钮后弹窗，并使用AJAX加载指定分类ID对应的数据。在滚动到底部时，进行AJAX翻页操作，加载下一页数据。
代码实现：
点击我弹窗并加载分类1数据
`
分类1
分类2
分类3
`
`
/*分类内容加载区*/
`
`
$(document).on(‘click’,’.btn’,function(){
var categoryId = $('.tab_p p.cur').attr('data-id');$('.tab_content').addClass("active");$(".tab_item").html('加载中...');loadCategoryData(categoryId, currentPage);
})
$(‘.tab_p p’).click(function(){
$(".tab_item").html('加载中...');$(this).addClass('cur').siblings().removeClass('cur');var categoryId = $(this).data('id');// 加载对应分类的数据loadCategoryData(categoryId, currentPage);
})
function loadCategoryData(categoryId, page) {
currentPage = page || 1;// 使用AJAX请求加载数据$.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").html(html); }});
}
// 监听滚动事件
$(‘.tab_item’).scroll(function() {
if ($('.tab_item').scrollTop() + $('.tab_item').height() >=$('.tab_item')[0].scrollHeight) { // 当滚动到底部时加载下一页数据 currentPage++; loadCategoryData(categoryId, currentPage);}
});
`
说明：
categoryId表示当前分类的ID。currentPage表示当前页码，滚动加载时会自动增加。AJAX请求加载数据，并追加到.tab_item元素中。滚动到底部时，会触发AJAX翻页操作，加载下一页数据。
以上就是如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1558761.html
微信扫一扫 
支付宝扫一扫 
