Django AJAX 无限滚动：无缝浏览大型数据集

2024-04-20 14:34:19

无缝集成 Django 视图的 AJAX 无限滚动

在处理大型数据集时，页面分页会带来不便，频繁的重新加载会中断用户体验。AJAX 无限滚动 提供了解决方案，允许用户逐步加载更多数据，而无需重新加载页面。

实现步骤

创建 Django 视图： 设置视图处理应用程序列表，提供筛选和分页功能。
AJAX 无限滚动： 使用 JavaScript 函数在滚动到页面底部时触发 AJAX 请求，加载更多数据。
Django 视图处理 AJAX 请求： 加载下一页数据，将其作为 JSON 响应发送回客户端。
响应 AJAX 请求： 客户端 JavaScript 解析 JSON 响应，将新数据追加到现有列表中。

代码示例

Django 视图：

def application_list_by_session(request):
    # ... (existing code)
    paginator = Paginator(submitted_application_list, 2)  # 设置每页项数
    page = request.GET.get('page')

    if request.headers.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':  # AJAX 请求
        page_obj = paginator.page(page)
        context = {
            # ... (existing context)
            'submitted_applications': page_obj,
        }
        return JsonResponse({'html': render_to_string('admission/application_list_by_session_ajax.html', context)})

    # ... (existing code)

JavaScript 代码：

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        // ... (existing code)
        $.ajax({
            // ... (existing code)
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                // ... (existing code)
            }
        });
    }
});