尝试在页面滚动上加载帖子时出现 Ajax/Jquery/PHP 问题

Posted 2023-02-24

【中文标题】尝试在页面滚动上加载帖子时出现 Ajax/Jquery/PHP 问题

【英文标题】：Ajax/Jquery/PHP issue when trying to load the posts on page scroll

【发布时间】：2021-02-24 00:56:09

【问题描述】：

我正在尝试在我的 word press 网站上使用 Ajax 加载我的帖子。一切正常，除了少数。当用户到达页脚上方 2000 像素时，我已经设置了 ajax 调用，现在的问题是，一旦用户到达该点，ajax 函数就会被一次又一次地调用，直到通过 ajax 加载新帖子我需要的是调用 ajax 函数仅当用户到达该点时才会加载帖子，然后用户再次向下滚动并到达该点，并且每次都应调用一次 ajax 函数。此外，每次我设置了 (3) 个要加载的帖子数量，每次相同的帖子再次加载 n 时。下面是我的代码

php 代码

function ajax_load_posts($args) 
    $ajax = false;
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
        $ajax = true;
    
    $post-per-page =3;
    $pagination = $_POST['page'] + 1;
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'order' => 'DESC'
        'orderby'   => 'title',
        'posts_per_page' =>$post-per-page,
        'paged'=>$pagination
    );
    $query = new WP_Query($args);
    if ($query->have_posts()):
        while ($query->have_posts()): $query->the_post();
            include 'ajax-content.php';
        endwhile;
    else:
        echo "false";
    wp_reset_postdata();
    if($ajax) die();

javascript/jQuery 代码

jQuery(document).ready(function($) 
    $(window).scroll(function() 
        var that = $('#loadMore');
        var page = $('#loadMore').data('page');
        var newPage = page + 1;
        var ajaxurl = $('#loadMore').data('url');
        var bottomOffset = 2000; 
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ))
            $.ajax(
                url: ajaxurl,
                type: 'post',
                data: 
                    page: page,
                    action: 'ajax_load_posts'
                ,
                error: function(response) 
                    console.log(response);
                ,
                success: function(response) 
                    if (response == 0) 
                        if ($("#no-more").length == 0) 
                            $('#ajax-content').append('<div id="no-more" class="text-center"><p>No more posts to load.</p></div>');
                        
                        $('#loadMore').hide();
                     else 
                        $('#loadMore').data('page', newPage);
                        $('#ajax-content').append(response);
                    
                
            );
        
    );
);

【参考方案1】：

您需要在发出如下请求时进行跟踪：

function ajax_load_posts($args) 
    $ajax = false;
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
        $ajax = true;
    

    // camel case is more excepted in WP/PHP for var names
    $posts_per_page = 3;

    // no need to increment here that is handled by js
    $pagination = $_POST['page'];

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'order' => 'DESC'
        'orderby'   => 'title',
        'posts_per_page' => $posts_per_page,
        'paged'=>$pagination
    );
    $query = new WP_Query($args);
    if ($query->have_posts()):
        while ($query->have_posts()): $query->the_post();
            include 'ajax-content.php';
        endwhile;
    else:
        echo "false";
    wp_reset_postdata();
    if($ajax) die();

jQuery(document).ready(function($) 
    // grab/set these on load rather that each scroll
    var page = $('#loadMore').data('page');
    var ajaxurl = $('#loadMore').data('url');
    var bottomOffset = 2000;

    // track if already fetching
    var isFetching = false;

    $(window).scroll(function() 
        // is this needed
        var that = $('#loadMore');

        // added check for isFetching
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && ! isFetching)
            // update so we dont keep calling
            isFetching = true;
            $.ajax(
                url: ajaxurl,
                type: 'post',
                data: 
                    page: page,
                    action: 'ajax_load_posts'
                ,
                error: function(response) 
                    console.log(response);
                ,
                success: function(response) 
                    if (response == 0) 
                        if ($("#no-more").length == 0) 
                            $('#ajax-content').append('<div id="no-more" class="text-center"><p>No more posts to load.</p></div>');
                        
                        $('#loadMore').hide();

                        // update so the next time user hits scroll point we can fetch
                        isFetching = false;

                        // update page no need to set a new var and only if we get results
                        page++; 
                     else 
                        $('#loadMore').data('page', newPage);
                        $('#ajax-content').append(response);
                    
                
            );
        
    );
);