Ajax 没有更多结果时无限滚动停止

Question

我的代码有问题。因此，当我到达结果末尾时，ajax 请求一遍又一遍地运行。我不确定该怎么做，但我希望无限滚动在数据库中没有更多结果时停止运行。

对ajax-posts.php

的初始ajax请求

var pageCategory = "' . $categoryId . '";
                    $.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                        initialize: true, pageCategory: pageCategory, resultLimit: 6
                    }).done(function(data) {
                        $("#primary #main").html(data);
                    });

然后代码在ajax-posts.php

global $wpdb;
    global $post;

    $limit = $_POST['resultLimit'];

    $querystrMax = "SELECT {$wpdb->prefix}posts.ID, {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.post_excerpt, {$wpdb->prefix}posts.guid, {$wpdb->prefix}posts.post_date, {$wpdb->prefix}posts.post_author
        FROM {$wpdb->prefix}posts
        LEFT JOIN {$wpdb->prefix}term_relationships rel ON rel.object_id = {$wpdb->prefix}posts.ID
        LEFT JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_taxonomy_id = rel.term_taxonomy_id
        LEFT JOIN {$wpdb->prefix}terms t ON t.term_id = tax.term_id
        WHERE t.term_id = " . $_SESSION['pageCategory'] . "
        AND {$wpdb->prefix}posts.post_type = 'post' 
        ORDER BY {$wpdb->prefix}posts.post_date DESC
    ";

    $pagepostsMax = $wpdb->get_results($querystrMax, OBJECT);

    $maxPostNum = count($pagepostsMax);

    $querystr = "SELECT {$wpdb->prefix}posts.ID, {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.post_excerpt, {$wpdb->prefix}posts.guid, {$wpdb->prefix}posts.post_date, {$wpdb->prefix}posts.post_author
    FROM {$wpdb->prefix}posts
    LEFT JOIN {$wpdb->prefix}term_relationships rel ON rel.object_id = {$wpdb->prefix}posts.ID
    LEFT JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_taxonomy_id = rel.term_taxonomy_id
    LEFT JOIN {$wpdb->prefix}terms t ON t.term_id = tax.term_id
    WHERE t.term_id = " . $_SESSION['pageCategory'] . "
    AND {$wpdb->prefix}posts.post_type = 'post' 
    ORDER BY {$wpdb->prefix}posts.post_date DESC
    LIMIT $limit
    ";

    $pageposts = $wpdb->get_results($querystr, OBJECT);
}

$pagePostsNum = count($pageposts);


$response = '';

if ($pagePostsNum <= ($maxPostNum - 6) ) {
    $response .= '
        <script type="text/javascript">
                jQuery(window).scroll(function() {
                    if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
                        var pageCategory = ' . $_SESSION['pageCategory'] . '
                        jQuery.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                            initialize: true, pageCategory: pageCategory, resultLimit: 6 + ' . $limit . '
                        }).done(function(data) {
                            jQuery("#primary #main").html(data);
                        });
                    }
                });
        </script>
    ';
}
else {
    $response .= '<p>No more results!</p>';
}


if ($pageposts):
    foreach ($pageposts as $post):
        $postId = get_the_ID();
        $postPermalink = get_the_permalink($postId);
        $postTitle = get_the_title();

        $response .= '
        <article class="gridView col-lg-4 col-md-6 col-xs-12">
            <div class="list-article-thumb" style="background: url('; if ( get_the_post_thumbnail_url() == false ) { $response .= get_stylesheet_directory_uri() . '/images/placholder2.png'; } else { $response .= get_the_post_thumbnail_url(); } $response .= ') no-repeat; height: 445px; background-size: cover; position: relative;">';


                <a href="' . esc_url( $postPermalink ) . '">
                    <div class="postLayoutOverlay"></div>
                </a>
            </div>

        </article>
        ';
    endforeach;

    wp_reset_query();

else :
    $response = '
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn\'t here.</p>
    ';
endif;

echo $response;

感谢各位漫游者

Answer 1

好的，我明白了。在最初的 ajax post 中有这个 initialize: true

所以在 ajax-posts.php 中，我使用 post var.

检查初始负载

if (isset($_POST['initialize'])) {
    $response .= '
        <script type="text/javascript">
                jQuery(window).scroll(function() {
                    if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
                        var pageCategory = ' . $_SESSION['pageCategory'] . '
                        jQuery.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                            initialize: true, pageCategory: pageCategory, resultLimit: 6 + ' . $limit . '
                        }).done(function(data) {
                            if (data != false) {
                                jQuery("#primary #main").html(data);
                            }
                        });
                    }
                });

                console.log();
        </script>
    ';
}

这样脚本只添加一次。然后，当我没有更多 post 可以显示时，我使用此代码取消绑定滚动功能。

if ($limit <= $maxPostNum) {
    $response .= '
        <script type="text/javascript">
            jQuery(window).unbind("scroll");
        </script>
    ';
}

瞧，这真是一种享受。 :D

Ajax 没有更多结果时无限滚动停止

Ajax infinate scroll stop when no more results

php

ajax

wordpress

jquery

infinite-scroll