解决WooCommerce产品AJAX分页触发整页刷新问题

你的AJAX分页触发整页刷新，核心问题是前端事件未正确拦截分页链接的默认行为，同时代码中存在几处前后端不匹配的问题，以下是针对性修复方案：

1. 修复前端JS事件绑定与请求逻辑 #

custom-ajax.js里的选择器和请求方式存在不匹配问题，修改如下：

jQuery(document).ready(function($) {
    var currentPage = 1;

    function loadProducts(page) {
        // 改用jQuery AJAX，和已加载的依赖匹配
        $.ajax({
            url: twentytwentyone_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'load_products_ajax',
                page: page
            },
            success: function(response) {
                $('#product-list-container').html(response);
                currentPage = page;
                // 更新URL历史记录，保持URL正确且不刷新页面
                var newUrl = addQueryParam(window.location.href, 'paged', page);
                window.history.pushState({page: page}, '', newUrl);
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    }

    // 辅助函数：添加/更新URL参数
    function addQueryParam(url, key, value) {
        var urlObj = new URL(url);
        urlObj.searchParams.set(key, value);
        return urlObj.toString();
    }

    // 初始加载第一页
    loadProducts(1);

    // 拦截分页链接点击：匹配paginate_links生成的a标签
    $(document).on('click', '.pagination2255 a', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        // 从链接URL中提取页码
        var pageMatch = $(this).attr('href').match(/paged=(\d+)/);
        if (pageMatch) {
            loadProducts(parseInt(pageMatch[1]));
        }
    });

    // 支持浏览器前进后退功能
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state && e.originalEvent.state.page) {
            loadProducts(e.originalEvent.state.page);
        }
    });
});

2. 修复后端AJAX回调的分页链接生成 #

functions.php里的分页链接base参数设置错误，需和模板保持一致，生成当前页面的URL而非admin-ajax.php：

// AJAX分页回调函数中，输出分页链接的部分
if ($products->max_num_pages > 1) {
    // 输出AJAX分页链接
    $pagination_args = array(
        'base' => add_query_arg('paged', '%#%'), // 和template-home.php保持一致
        'format' => '?paged=%#%',
        'current' => $page,
        'total' => $products->max_num_pages,
        'prev_text' => '<< Zurück',
        'next_text' => 'Weiter >>',
        'mid_size' => 5, // 当前页码两侧显示的链接数量
    );

    echo '<div class="pagination2255 paginationtop">';
    echo paginate_links($pagination_args);
    echo '</div>';
}

后端接收页码的$_POST['page']逻辑正确，和前端AJAX的data参数对应，无需修改。

3. 模板文件无需修改 #

template-home.php里的分页链接生成逻辑是正确的，保持原样即可。

问题根源说明 #

1. 事件绑定失效：之前用.pagination-link选择器，但paginate_links()生成的链接没有这个类，也没有data-page属性，导致点击事件未触发，浏览器执行默认跳转。
2. 前后端请求方式不匹配：前端原代码用Fetch发送GET请求，但后端用$_POST['page']接收，会导致页码获取失败，分页逻辑异常。
3. 分页链接URL错误：后端AJAX回调里的base设置为admin-ajax.php，生成的链接指向后台地址，不符合前端页面跳转需求。

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