WP_QUERY AJAX加载器检测帖子结束

时间：2018-08-22 作者：Stickers

我构建了ajax加载程序，如下所示。

如何检测它何时到达所有帖子的末尾？这样我就可以让“更多”按钮消失，或者不再可以点击。

页面模板中：

WP_Query stuff...

if ($press_posts->max_num_pages > 1) :
    echo \'<a class="link-button" id="load-more">More</a>\';
endif;

功能。php

function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        \'cat\' => 1,
        \'posts_per_page\' => $ppp,
        \'offset\' => $offset
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post();
        get_template_part(\'template-parts/content\', \'ajax\');
    }
    exit;
}
add_action(\'wp_ajax_nopriv_more_post_ajax\', \'more_post_ajax\');
add_action(\'wp_ajax_more_post_ajax\', \'more_post_ajax\');

和javascripts：

<script>
    var ajaxUrl = "<?php echo admin_url(\'admin-ajax.php\')?>";
    var page = 1;
    var ppp = 6; // posts per page

    jQuery("#load-more").on("click", function() {
        jQuery("#load-more").addClass("disabled");
        jQuery.post(ajaxUrl, {
            action: "more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        }).success(function(posts) {
            page++;
            jQuery("#press-listing").append(posts); // append to container
            jQuery("#load-more").removeClass("disabled");
        });

    });
</script>

3 个回复

最合适的回答,由SO网友:Stickers 整理而成

页面模板：

<div class="entry-content">
    <?php 
        $args = array(
            \'post_type\' => \'post\',
            \'post_status\' => \'publish\',
            \'posts_per_page\' => \'2\',
            \'paged\' => 1,
        );
        $my_posts = new WP_Query($args);
        if ($my_posts->have_posts()) : 
    ?>
        <div class="my-posts">
            <?php while ($my_posts->have_posts()) : $my_posts->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>
    <div class="loadmore">Load More...</div>
</div>

Ajax jQuery（加载更多按钮）：

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url(\'admin-ajax.php\'); ?>";
var page = 2;
jQuery(function($) {
    $(\'body\').on(\'click\', \'.loadmore\', function() {
        var data = {
            \'action\': \'load_posts_by_ajax\',
            \'page\': page,
            \'security\': \'<?php echo wp_create_nonce("load_more_posts"); ?>\'
        };

        max = <?php echo $my_posts->max_num_pages; ?>

        $.post(ajaxurl, data, function(response) {
            $(\'.my-posts\').append(response);
            if (page < max) {
                // end of posts
            }
            page++;
        });
    });
});
</script>

功能：

function load_posts_by_ajax_callback() {
    check_ajax_referer(\'load_more_posts\', \'security\');
    $paged = $_POST[\'page\'];
    $args = array(
        \'post_type\' => \'post\',
        \'post_status\' => \'publish\',
        \'posts_per_page\' => \'2\',
        \'paged\' => $paged,
   );
    $my_posts = new WP_Query($args);
    if ($my_posts->have_posts()) :
        ?>
        <?php while ($my_posts->have_posts()) : $my_posts->the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
        <?php endwhile; ?>
        <?php
    endif;
    wp_die();
}
add_action(\'wp_ajax_load_posts_by_ajax\', \'load_posts_by_ajax_callback\');
add_action(\'wp_ajax_nopriv_load_posts_by_ajax\', \'load_posts_by_ajax_callback\');

添加-Ajax jQuery（滚动加载）：

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        var data = {
            \'action\': \'load_posts_by_ajax\',
            \'page\': page,
            \'security\': \'<?php echo wp_create_nonce("load_more_posts"); ?>\'
        };

        $.post(ajaxurl, data, function(response) {
            $(\'.my-posts\').append(response);
            page++;
        });
    }
});

Source

SO网友:firxworx

我同意评论人TomJNowell的观点，值得研究RESTAPI。但是，关于您的具体问题：

这里有一个想法：

检查您的more_post_ajax() 功能，并将其包括在您的回复中，以及您正在发回的帖子中。例如，您可以more_posts 布尔标志，或者可能是计数；不管你想怎么做.success(function(posts) { ... }) 在响应中添加处理此新信息的逻辑。如果没有剩余帖子，您可以禁用/隐藏您的#load-more 元素，并可能向用户添加一条消息，说明没有剩余帖子我不确定您通过get_template_part(\'template-parts/content\', \'ajax\') 或者它在做什么，这方面很难更具体。

不管怎样，您的WP_Query 存储在$loop 有一个posts 属性，该属性是您的帖子的数组。我可以假设你想posts 作为你回应的一部分。

这个WP_Query 所有物found_posts 是所有符合您标准的帖子的计数，不考虑您的偏移量（即其帖子总数），除非使用arg禁用此功能no_found_rows （本案不适用）。由于您知道每页的帖子数和偏移量，如果有更多的帖子可供加载或不加载，您可以在回复中传递回信息。另一种方式可能是max_num_pages 所有物

您可以将这些组合成一个数组/对象，并使用wp_send_json() 或wp_send_json_success() 发送它们，然后在js中处理响应。您需要jQuery的parseJSON() 解析响应。

如果你真的对模板部分输出的内容感兴趣，并且喜欢你轻松地做的事情jQuery("#press-listing").append(posts) 在js端显示它，您可以捕获get_template_part(\'template-parts/content\', \'ajax\'); 使用输出缓冲（有点脏）来收集它，以便包含在响应中，例如。

ob_start();
get_template_part(\'template-parts/content\', \'ajax\');
// call ob_get_contents() and load the return value into an array or string to send back
ob_end_clean();

SO网友:Raja Mohammed

更改代码$offet to $paged 变量WP\\u Query可以跟踪将为您提供循环对象中总页数的页面，如下所示

$loop->max_num_pages

<script>
    var ajaxUrl = "<?php echo admin_url(\'admin-ajax.php\')?>";
    var page = 1;
    var ppp = 6; // posts per page

    jQuery("#load-more").on("click", function() {
        jQuery("#load-more").addClass("disabled");
        jQuery.post(ajaxUrl, {
            action: "more_post_ajax",
            page: page,
            ppp: ppp
        }).success(function(posts) {
            // execute this block only if there is post
            if(posts) { 
            page++;
            jQuery("#press-listing").append(posts); // append to container
            jQuery("#load-more").removeClass("disabled");
            }
        });

    });
</script>

您可以使用php ajax函数

function more_post_ajax() {
    $page = $_POST["page"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        \'cat\' => 1,
        \'posts_per_page\' => $ppp,
        \'paged\' => $page
    );

    $loop = new WP_Query($args);

    if($loop->max_num_pages <= $page):

    while ($loop->have_posts()) { $loop->the_post();
        get_template_part(\'template-parts/content\', \'ajax\');
    }
    exit;

   else:
     echo 0;
     die();

   endif;
}
add_action(\'wp_ajax_nopriv_more_post_ajax\', \'more_post_ajax\');
add_action(\'wp_ajax_more_post_ajax\', \'more_post_ajax\');

结束

小码农CODE

WP_QUERY AJAX加载器检测帖子结束

相关推荐

如何将url设置为对html文档发出AJAX请求？