WordPress中AJAX滚动加载异常：Div内重载整页而非单篇文章

你的问题核心出在滚动触发时，showSinglePost函数无法正确获取AJAX所需的page和ajaxurl参数，同时还有几处语法/参数错误，导致请求出错，最终返回了整个站点页面。

具体问题点： #

1. that变量指向错误：点击触发时，$(this)指向的是.load-single-article按钮，能正确读取data-page和data-url；但滚动触发时，this指向的是window对象，that.data('page')和that.data('url')会返回undefined。AJAX请求的url为undefined时，jQuery会默认请求当前页面的URL，所以你看到的是整个站点被重载到#primary里。
2. dataType参数错误：你在AJAX配置里写了dataType: 'post'，这是无效值，应该设置为html（因为我们期望返回的是文章HTML内容）。
3. 多余的语法符号：infiniteScroll函数末尾多了一个闭合的}，会导致JS报错，影响功能执行。
4. PHP参数未做安全处理：直接使用$_POST["page"]可能存在安全风险，应该做类型转换。

修改后的完整代码： #

1. 修正PHP（Ajax.php）

add_action('wp_ajax_nopriv_art_load_single','art_load_single');
add_action('wp_ajax_art_load_single','art_load_single');
function art_load_single(){
    // 安全处理POST参数
    $paged = intval($_POST["page"]) + 1;
    $query = new WP_Query(array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => 1
    ));
    ?>
    <?php if($query->have_posts()): while($query->have_posts()): $query->the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <div class="entry-title">
                <?php the_title( '<h1>', '</h1>' ); ?>
                <h2 class="sub-headline">
                    <?php if ( has_excerpt() ) { the_excerpt(); } ?>
                </h2>
            </div>
            <?php if ( has_post_thumbnail()) : ?>
            <div class="article-featured-image">
                <a href="<?php the_post_thumbnail_url('full'); ?>" rel="lightbox" title="<?php the_title(); ?>"><?php the_post_thumbnail('large'); ?></a>
            </div>
            <?php endif; ?>
        </header><!-- .entry-header -->
        <div class="entry-content">
            <?php the_content(); ?>
            <?php wp_link_pages( array(
                'before' => '<div class="page-links">' . __( 'Pages:', 'some_theme' ),
                'after' => '</div>',
            ) ); ?>
        </div><!-- .entry-content -->
    </article><!-- #post-## -->
    <?php endwhile; endif; wp_reset_postdata(); ?>
    <?php die(); }

2. 修正JS（Load-more.js）

var postContainer = document.getElementById('primary');
var request_in_progress = false;
// 缓存按钮元素和初始参数
var loadBtn = $('.load-single-article');
var ajaxurl = loadBtn.data('url');
var currentPage = parseInt(loadBtn.data('page'));

$(window).scroll(function(){
    infiniteScroll();
});

function infiniteScroll(){
    var content_height = postContainer.offsetHeight;
    var current_y = window.innerHeight + window.pageYOffset;
    // 加个小偏移，提前触发加载，提升体验
    if(current_y >= content_height - 200) showSinglePost();
}

// 保留点击事件（可选，如果你还需要点击加载的话）
$(document).on('click','.load-single-article', function(){
    showSinglePost();
});

function showSinglePost(){
    if(request_in_progress) {
        return;
    }
    request_in_progress = true;
    var newPage = currentPage + 1;
    loadBtn.find('.text').html('LOADING...');
    
    $.ajax({
        url : ajaxurl,
        type : 'post',
        data : {
            page : currentPage,
            action : 'art_load_single'
        },
        dataType: 'html', // 修正为正确的dataType
        error : function( response ){
            console.log('AJAX Error:', response);
            loadBtn.find('.text').html('VIEW MORE');
            request_in_progress = false; // 错误时重置状态，避免锁死
        },
        success : function( response ) {
            setTimeout(function(){
                currentPage = newPage;
                loadBtn.data('page', newPage); // 更新按钮的page数据
                $('#primary').append( response );
                loadBtn.find('.text').html('VIEW MORE');
                request_in_progress = false;
            }, 500);
        }
    });
}

关键修改说明： #

• 缓存参数：把按钮的data-page和data-url提前缓存到全局变量，不再依赖$(this)，确保点击和滚动触发时都能拿到正确值。
• 修正dataType：设置为html，告诉jQuery我们期望返回HTML内容，避免解析错误。
• 语法修复：删除infiniteScroll函数末尾多余的}。
• 错误处理优化：AJAX请求失败时重置request_in_progress状态，避免按钮/滚动触发被永久锁死。
• 安全优化：PHP里用intval()处理POST参数，防止SQL注入风险。
• 滚动触发体验优化：添加了200px的偏移量，用户滚动到距离底部200px时就触发加载，不用完全滚到底部。

这样修改后，滚动触发就能和点击触发一样，正确加载下一篇文章了。

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