WordPress Ajax加载更多文章重复加载问题求助

核心问题定位 #

1. 页码变量无法更新：原代码用const声明current_page_myajax，属于常量无法修改，执行current_page_myajax++无效，导致每次请求都发送page=1，重复加载第一页内容。
2. 请求逻辑错误：初始页码为1，第一次请求应该获取第2页，但原代码直接传current_page_myajax，还是请求第1页。
3. 未同步DOM数据：即便更新变量，DOM中的data-current-page-myajax未同步修改，页面状态无法持久化。
4. 无防重复点击处理：按钮点击后未临时禁用，可能触发多次重复请求。

修复后的JS代码 #

if (document.querySelector('.js-btn-load-more')) {
    const el = document.querySelector("#loader");
    
    // 改用let声明可修改的数值类型页码变量
    let current_page_myajax = parseInt(el.dataset.currentPageMyajax);
    const current_post_type = el.dataset.currentPostType;
    const current_term_id = el.dataset.currentTermId;
    const posts_myajax = el.dataset.postsMyajax;
    const max_page_myajax = parseInt(el.dataset.maxPageMyajax);
    const ajax_url = el.dataset.ajaxUrl;

    const loaderBtn = document.querySelectorAll('.js-btn-load-more');

    loaderBtn.forEach(button => {
        button.addEventListener('click', function(){
            // 点击后立即禁用按钮，防止重复请求
            this.disabled = true;
            this.style.display = 'none';
            
            const containerResponse = document.querySelector(".js-ajax-response");
            const data = new FormData();

            data.append( 'action', 'load_archive' );
            data.append( 'archive_post_type', current_post_type );
            data.append( 'taxonomy_term_id', current_term_id );
            data.append( 'query', posts_myajax );
            // 请求下一页，初始页码1对应请求第2页
            data.append( 'page', current_page_myajax + 1 );

            fetch(ajax_url, {
                method: "POST",
                body: data
            })
            .then((response) => response.text())
            .then((responseData) => {
                if (responseData) {
                    containerResponse.innerHTML += responseData;
                    locoScroll.update();
                    
                    // 更新页码变量和DOM的data属性，保持状态一致
                    current_page_myajax++;
                    el.dataset.currentPageMyajax = current_page_myajax;

                    // 判断是否还有更多内容，决定是否恢复按钮
                    if (current_page_myajax < max_page_myajax) {
                        this.disabled = false;
                        this.style.display = 'block';
                    } else {
                        this.style.display = 'none';
                    }
                } else {
                    this.style.display = 'none';
                }
            })
            .catch((error) => {
                console.error('加载失败:', error);
                // 请求失败时恢复按钮状态
                this.disabled = false;
                this.style.display = 'block';
            });
        });
    });
}

PHP端Ajax处理函数检查 #

确保你的load_archive回调函数正确解析参数并设置页码：

add_action('wp_ajax_load_archive', 'load_archive_callback');
add_action('wp_ajax_nopriv_load_archive', 'load_archive_callback');

function load_archive_callback() {
    if (!isset($_POST['query']) || !isset($_POST['page'])) {
        wp_die();
    }

    // 反序列化查询参数，注意处理转义字符
    $query_vars = unserialize(stripslashes($_POST['query']));
    // 覆盖paged参数为Ajax传递的页码
    $query_vars['paged'] = intval($_POST['page']);
    // 排除置顶文章避免重复（可选，根据需求调整）
    $query_vars['post__not_in'] = get_option('sticky_posts');

    $loop = new WP_Query($query_vars);

    if ($loop->have_posts()) {
        while ($loop->have_posts()) {
            $loop->the_post();
            // 输出你的文章模板内容
            get_template_part('template-parts/content', get_post_type());
        }
        wp_reset_postdata();
    }

    wp_die();
}

关键修复点说明 #

• 把current_page_myajax改为let声明并转为数值类型，确保可以正常递增。
• 请求时传递current_page_myajax + 1，保证第一次请求获取第2页内容。
• 请求成功后同步更新DOM的data-current-page-myajax属性，维持页面状态一致性。
• 添加按钮禁用/恢复逻辑，避免重复点击引发的重复请求。
• PHP端确保正确覆盖paged参数，基于Ajax传递的页码获取对应内容。

内容的提问来源于stack exchange，提问作者Mathieu Préaud