Laravel结合jQuery与AJAX实现分页点击下一页仅展示JSON问题求助

• 生成的分页链接为指向/fetch-associate接口的普通超链接，点击后触发浏览器默认跳转行为，直接加载接口返回的JSON数据，未走AJAX局部刷新逻辑
• 原有脚本渲染分页前未清空旧分页内容，会导致分页条重复堆叠
• 原有jQuery代码存在语法疏漏，$(document).ready 缺少闭合标识，可能导致脚本执行异常

1. 替换Blade视图中的脚本代码 #

$(document).ready(function() {
    // 首次加载第一页数据
    fetchassociate();

    // 封装数据请求方法，支持传入分页页码
    function fetchassociate(page = 1) {
        $.ajax({
            type: "GET",
            url: "/fetch-associate",
            data: {page: page},
            dataType: "json",
            success: function(response) {
                // 清空旧数据
                $('tbody').html("");
                // 渲染列表数据
                $.each(response.associate.data, function(key, associates) {
                    $('tbody').append('<tr>\
                        <td>' + associates.associate_id + '</td>\
                        <td>' + associates.last_name + ', ' + associates.first_name + ' ' + associates.middle_name + '</td>\
                        <td>' + associates.username + '</td>\
                        <td>' + associates.email + '</td>\
                        <td>' + associates.phone + '</td>\
                        <td>' + associates.gender + '</td>\
                        <td><button type = "button" value = "' + associates.associate_id + '" class = "edit_associate btn btn-primary btn-sm">Edit</button>\
                        <button type = "button" value = "' + associates.associate_id + '" class = "delete_associate btn btn-danger btn-sm">Delete</button></td>\
                    </tr>');
                });
                // 清空旧分页条
                $('#tablefoot').html("");
                // 渲染新分页条，给分页链接加专属class方便绑定事件
                $.each(response.associate.links, function(key, link) {
                    let disabled = link.active ? 'active' : '';
                    $('#tablefoot').append( '<ul class="pagination pagination-sm m-0 float-left">\
                        <li class="page-item ' + disabled + '"><a class="page-link pagination-link" href="'+link.url+'">'+link.label+'</a></li>\
                    </ul>');
                });
            }
        });
    }

    // 绑定分页链接点击事件，阻止默认跳转
    $(document).on('click', '.pagination-link', function(e) {
        e.preventDefault();
        // 从链接地址中提取page参数
        let page = new URL($(this).attr('href')).searchParams.get('page');
        if(page) {
            fetchassociate(page);
        }
    });
});

2. 其余代码无需调整 #

Laravel自带的paginate方法会自动读取请求中的page查询参数，返回对应页的数据，原有Controller、路由配置均可保持不变。

内容的提问来源于stack exchange，提问作者Kraust15