如何修改WordPress Ajax代码实现无刷新分页切换（替代加载更多）

1. 模板文件（Template.php）调整 #

把原有的“加载更多”按钮替换成标准分页导航，同时给元素加标识方便JS操作：

<?php
// 订单列表容器，固定ID用于后续内容替换
echo '<div id="orders-list-container">';
    while ( $orders_query->have_posts() ) : $orders_query->the_post();
        // 你的订单内容模板，保持和后端回调一致
        echo '<div class="order-item">' . get_the_title() . '</div>';
    endwhile;
echo '</div>';

// 输出分页导航，替换加载更多按钮
echo '<div class="orders-pagination">';
    $big = 999999999;
    echo paginate_links( array(
        'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'    => '?paged=%#%',
        'current'   => max( 1, get_query_var('paged') ),
        'total'     => $orders_query->max_num_pages,
        'prev_text' => '&laquo; 上一页',
        'next_text' => '下一页 &raquo;',
        'add_args'  => false,
        'type'      => 'list',
        'walker'    => new Walker_Pagination_Custom()
    ) );
echo '</div>';

// 自定义Walker类，给分页链接加页码标识
class Walker_Pagination_Custom extends Walker_Page {
    function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
        $output .= '<li class="page-item' . ( $page->current ? ' active' : '' ) . '">';
        if ( $page->url ) {
            $paged_num = filter_var( $page->url, FILTER_SANITIZE_NUMBER_INT );
            $output .= '<a href="' . esc_url( $page->url ) . '" class="page-link" data-paged="' . $paged_num . '">' . $page->label . '</a>';
        } else {
            $output .= '<span class="page-link">' . $page->label . '</span>';
        }
        $output .= '</li>';
    }
}
?>

2. JS文件（File.js）修改 #

替换原加载逻辑为分页点击事件，核心是替换而非追加内容：

jQuery(document).ready(function($) {
    // 阻止分页链接默认跳转
    $('.orders-pagination').on('click', '.page-link', function(e) {
        e.preventDefault();
        
        var paged = $(this).data('paged');
        var $container = $('#orders-list-container');
        var $pagination = $('.orders-pagination');
        
        // 加载状态提示
        $container.addClass('loading').html('<div class="loading-text">加载中...</div>');
        
        // 发送Ajax请求
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'get_user_orders',
                security: ajax_object.security,
                paged: paged,
                user_id: ajax_object.current_user_id
            },
            success: function(response) {
                if (response.success) {
                    // 替换列表和分页内容
                    $container.removeClass('loading').html(response.data.orders_html);
                    $pagination.html(response.data.pagination_html);
                    // 可选：更新URL，优化用户体验
                    history.pushState(null, null, '?paged=' + paged);
                } else {
                    $container.removeClass('loading').html('<div class="error-text">加载失败，请重试</div>');
                }
            },
            error: function() {
                $container.removeClass('loading').html('<div class="error-text">网络错误，请重试</div>');
            }
        });
    });

    // 可选：处理浏览器前进后退
    $(window).on('popstate', function() {
        var paged = new URLSearchParams(window.location.search).get('paged') || 1;
        loadOrders(paged);
    });

    // 封装加载函数，方便复用
    function loadOrders(paged) {
        var $container = $('#orders-list-container');
        var $pagination = $('.orders-pagination');
        
        $container.addClass('loading').html('<div class="loading-text">加载中...</div>');
        
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'get_user_orders',
                security: ajax_object.security,
                paged: paged,
                user_id: ajax_object.current_user_id
            },
            success: function(response) {
                if (response.success) {
                    $container.removeClass('loading').html(response.data.orders_html);
                    $pagination.html(response.data.pagination_html);
                } else {
                    $container.removeClass('loading').html('<div class="error-text">加载失败，请重试</div>');
                }
            },
            error: function() {
                $container.removeClass('loading').html('<div class="error-text">网络错误，请重试</div>');
            }
        });
    }
});

3. 函数文件（functions.php）调整 #

修改Ajax回调，返回完整的订单列表和分页导航HTML：

// 注册Ajax动作
add_action('wp_ajax_get_user_orders', 'get_user_orders_callback');
add_action('wp_ajax_nopriv_get_user_orders', 'get_user_orders_callback');

function get_user_orders_callback() {
    // 验证请求合法性
    check_ajax_referer('orders_nonce', 'security');
    
    $paged = isset($_POST['paged']) ? absint($_POST['paged']) : 1;
    $user_id = isset($_POST['user_id']) ? absint($_POST['user_id']) : get_current_user_id();
    
    // WP_Query参数，确保paged正确传递
    $args = array(
        'post_type'      => 'user_order', // 你的自定义文章类型
        'posts_per_page' => 10,
        'paged'          => $paged,
        'post_status'    => 'publish',
        'author'         => $user_id,
        // 其他原有查询参数
    );
    
    $orders_query = new WP_Query($args);
    
    // 捕获订单列表HTML
    ob_start();
    if ($orders_query->have_posts()) :
        while ($orders_query->have_posts()) : $orders_query->the_post();
            // 和模板一致的订单内容
            echo '<div class="order-item">' . get_the_title() . '</div>';
        endwhile;
    else :
        echo '<div class="no-orders">暂无订单</div>';
    endif;
    $orders_html = ob_get_clean();
    
    // 捕获分页导航HTML
    ob_start();
    $big = 999999999;
    echo paginate_links(array(
        'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format'    => '?paged=%#%',
        'current'   => max(1, $paged),
        'total'     => $orders_query->max_num_pages,
        'prev_text' => '&laquo; 上一页',
        'next_text' => '下一页 &raquo;',
        'add_args'  => false,
        'type'      => 'list',
        'walker'    => new Walker_Pagination_Custom()
    ));
    $pagination_html = ob_get_clean();
    
    // 返回响应
    wp_send_json_success(array(
        'orders_html'     => $orders_html,
        'pagination_html' => $pagination_html
    ));
    
    wp_die();
}

// 定义自定义Walker类
class Walker_Pagination_Custom extends Walker_Page {
    function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
        $output .= '<li class="page-item' . ( $page->current ? ' active' : '' ) . '">';
        if ( $page->url ) {
            $paged_num = filter_var( $page->url, FILTER_SANITIZE_NUMBER_INT );
            $output .= '<a href="' . esc_url( $page->url ) . '" class="page-link" data-paged="' . $paged_num . '">' . $page->label . '</a>';
        } else {
            $output .= '<span class="page-link">' . $page->label . '</span>';
        }
        $output .= '</li>';
    }
}

// 加载脚本并传递全局变量
add_action('wp_enqueue_scripts', 'enqueue_orders_scripts');
function enqueue_orders_scripts() {
    wp_enqueue_script('orders-ajax', get_template_directory_uri() . '/js/File.js', array('jquery'), '1.0', true);
    
    wp_localize_script('orders-ajax', 'ajax_object', array(
        'ajax_url'        => admin_url('admin-ajax.php'),
        'current_user_id' => get_current_user_id(),
        'security'        => wp_create_nonce('orders_nonce')
    ));
}

关键注意事项 #

• 保持模板和Ajax回调中的订单内容完全一致，避免样式/内容差异
• 必须保留nonce验证，防止恶意请求
• URL更新和前进后退处理是可选优化，能提升用户体验
• 测试时重点验证分页边界（第一页、最后一页的链接状态）

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