jquery ajax无限加载

基础概念

jQuery AJAX 是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。无限加载（Infinite Scrolling）是一种用户体验设计模式，当用户滚动到页面底部时，自动加载更多内容。

类型

基于滚动事件的无限加载：监听窗口或元素的滚动事件，当滚动到底部时触发加载。
基于分页的无限加载：通过服务器返回的分页信息，逐步加载更多内容。

应用场景

社交媒体动态加载
电商网站商品列表
新闻网站的文章列表

示例代码

以下是一个基于滚动事件的无限加载示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Scroll Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 初始内容 -->
    </div>
    <div id="loading" style="display:none;">Loading...</div>

    <script>
        var page = 1;
        var loading = false;

        function loadMoreContent() {
            if (loading) return;
            loading = true;
            $('#loading').show();

            $.ajax({
                url: 'https://api.example.com/data',
                method: 'GET',
                data: { page: page },
                success: function(data) {
                    $('#content').append(data);
                    page++;
                    loading = false;
                    $('#loading').hide();
                },
                error: function() {
                    loading = false;
                    $('#loading').text('Failed to load more content');
                }
            });
        }

        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                loadMoreContent();
            }
        });

        // 初始加载
        loadMoreContent();
    </script>
</body>
</html>