如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？-html教程-PHP中文网

如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？

碧海醫心

发布： 2024-11-10 12:36:01

原创

1010人浏览过

如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？

jquery实现弹窗ajax翻页tab数据加载

点击按钮后弹窗，并使用AJAX加载指定分类ID对应的数据。在滚动到底部时，进行AJAX翻页操作，加载下一页数据。

代码实现：

<div class="btn">点击我弹窗并加载分类1数据</div>

`<div class="tab_p">

<p data-id="分类1ID" data-page="总页数">分类1</p>
<p data-id="分类2ID" data-page="总页数">分类2</p>
<p data-id="分类3ID" data-page="总页数">分类3</p>

登录后复制

</div>`

`<div class="tab_content">

<div class="tab_item">
    /*分类内容加载区*/
</div>

登录后复制

</div>`

`<script>
$(document).on('click','.btn',function(){

var categoryId = $('.tab_p p.cur').attr('data-id');
$('.tab_content').addClass("active");
$(".tab_item").html('加载中...');
loadCategoryData(categoryId, currentPage);

登录后复制

})

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

$('.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 +='<div><img  src="'+obj[i].img_url+'" alt="如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？" ><span>"'+obj[i].title+'"</span></div>';
        }
        $(".tab_item").html(html);
    }
});

登录后复制

}

// 监听滚动事件
$('.tab_item').scroll(function() {

if ($('.tab_item').scrollTop() + $('.tab_item').height() >=$('.tab_item')[0].scrollHeight) {
    // 当滚动到底部时加载下一页数据
    currentPage++;
    loadCategoryData(categoryId, currentPage);
}

登录后复制

});
</script>`

说明：

categoryId表示当前分类的ID。
currentPage表示当前页码，滚动加载时会自动增加。
AJAX请求加载数据，并追加到.tab_item元素中。
滚动到底部时，会触发AJAX翻页操作，加载下一页数据。

以上就是如何使用jQuery实现弹窗AJAX翻页TAB数据加载，并在滚动到底部时自动加载下一页数据？的详细内容，更多请关注php中文网其它相关文章！