滾動中的AJAX重新加載WordPress中div中的頁面

Question

因此，基本上，每當我在JQuery中遇到“ click”事件時，我都能獲得WP和AJAX來加載頁面。 使用click事件，它可以正常工作，但是，當將其全部切換為滾動顯示功能時，它不會正確地重新加載以下一個或多個帖子（如單擊時一樣），而是重新加載了指定div中網站的整個頁面。

這是我的代碼：

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(){

    $paged = $_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() ) {
                        echo '';
                    } else { 
                        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();

}

加載more.js

var postContainer = document.getElementById('primary');
var request_in_progress = false;

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

function infiniteScroll(){
    var content_height = postContainer.offsetHeight;
    var current_y = window.innerHeight + window.pageYOffset;
    if(current_y >= content_height) 
        showSinglePost();
    } 
}

//$(document).on('click','.load-single-article', function(){
function showSinglePost(){

    if(request_in_progress) { return; }
    request_in_progress = true;

    var that = $(this);
    var page = that.data('page');
    var newPage = page+1;
    var ajaxurl = that.data('url');

    that.find('.text').html('LOADING...');

    $.ajax({

        url : ajaxurl,
        type : 'post',
        data : {
            page : page,
            action : 'art_load_single',
            dataType: 'post'
        },
        error : function( response ){
            console.log(response);
        },
        success : function( response ) {
            setTimeout(function(){

                that.data('page', newPage);
                $('#primary').append( response );

                that.find('.text').html('VIEW MORE');

                request_in_progress = false;

            }, 500);

        }

    });
}

為了以防萬一，請保留“點擊”事件。 最后，我的點擊按鈕如下：

<a class="view-btn load-single-article" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>"><span class="text">VIEW MORE</span></a>

對於AJAX來說，我有點陌生，我相信這可能只是URL在單擊時調用與滾動加載時的反應不同，或者單擊只是偶然。 任何幫助表示贊賞！

Answer 1

這是您想要的簡化版本，因此您應該可以插入自己的文章加載等。它從一堆已經加載的文章開始，當您滾動查看它時，可以查看您在哪一頁是。 如果您位於頁面底部，那么它將加載新文章並將其追加。

 var articleCount = 0; var $window = $(window); var $body = $("body"); $window.on("scroll", function() { // check to see if we're near the bottom of the page if ($window.scrollTop() > $body.height() - $window.innerHeight()) { // we are at the bottom, so load a new article loadNextArticle(); } }); // make this function actually load an article and append it to the page function loadNextArticle() { articleCount++; $body.append("<div class=\\"single-article\\">I am article number " + articleCount + "</div>"); } // create some articles when the page loads... for (var i = 0; i < 6; i++) { loadNextArticle(); } 

 .single-article { background-color: rgb(230, 230, 240); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; height: 200px; margin: 10px; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

顯然，您需要對其進行修改以適合您的特定要求，但是我已經嘗試使其盡可能通用。 實際上，您應該只能夠將Javascript復制/粘貼到您的站點中，並替換掉加載和追加新文章的部分。