自定义WP_QUERY循环中的AJAX无限滚动无法工作

我已经为页面模板设置了一个自定义WP\\U查询循环。我通过ajax实现了一个无限滚动方法，调用成功，但由于某些原因，我无法让查询喜欢循环中的分页参数。它什么也拉不动。

以下是我的ajax操作代码：

// AJAX Infinite Scroll
function txcap_ajax_scroll() {

    $args = isset( $_POST[\'query\'] ) ? array_map( \'esc_attr\', 
    $_POST[\'query\'] ) : array();
    $args[\'post_type\'] = isset( $args[\'post_type\'] ) ? esc_attr( 
    $args[\'post_type\'] ) : \'post\';
    $args[\'paged\'] = esc_attr( $_POST[\'page\'] );
    $args[\'post_status\'] = \'publish\';

    ob_start();  

    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
      $post_count = 1;
      while ( $query->have_posts() ) {
        $query->the_post()
       ?>

        <article id="post-<?php the_ID(); ?>" 
          <?php if ( $post_count % 3 == 0): ?>
            class="fdm-post fdm-standard last"
          <?php elseif ( $post_count % 4 == 0 ): ?>
            class="fdm-post fdm-half-left"
          <?php elseif ( $post_count % 5 == 0 ): ?>
            class="fdm-post fdm-half-right"
          <?php else: ?>
            class="fdm-post fdm-standard"
          <?php endif; ?> >

          <img src=\'<?php the_post_thumbnail_url("fdm_blog") ?>\'>
          <div class="fdm-postlist-item-overlay"></div>
          <div class="fdm-postlist-item-content">
            <div class="fdm-postlist-item-title">
              <a href="#"><h3><?php the_title(); ?></h3></a>
            </div>
            <div class="fdm-postlist-item-data">
              <span><?php the_time(\'F jS, Y\'); ?></span> • <span><?php the_author_posts_link(); ?></span>
            </div>
         </div>

       </article>

       <?php
       $post_count++;
    }
  }
  wp_reset_postdata();

  $data = ob_get_clean();
  wp_send_json_success( $data );
  wp_die();
}
add_action( \'wp_ajax_txcap_ajax_scroll\', \'txcap_ajax_scroll\' );
add_action( \'wp_ajax_nopriv_txcap_ajax_scroll\', \'txcap_ajax_scroll\' );

以下是我的排队代码（&W）；本地化ajax：

global $wp_query;

$args = array(
  \'ajaxurl\' => admin_url( \'admin-ajax.php\' ),
  \'query\'   => $wp_query->query
);

wp_enqueue_script( \'ajax_infinite_scroll\', get_stylesheet_directory_uri() . \'/js/ajax_infinite_scroll.js\', array(\'jquery\'), \'1.0\' ,true );

wp_localize_script( \'ajax_infinite_scroll\', \'ajaxinfinitescroll\', $args );

这是我的用于无限滚动的ajax处理程序。

jQuery(function($) {
$(\'.fdm-blog-container\').append( \'<span class="load-more"></span>\' );
var button = $(\'.fdm-blog-container .load-more\');
var page = 2;
var loading = false;
var scrollHandling = {
    allow: true,
    reallow: function() {
        scrollHandling.allow = true;
    },
    delay: 400 //(milliseconds) adjust to the highest acceptable value
};

$(window).scroll(function() {
    if( ! loading && scrollHandling.allow ) {
        scrollHandling.allow = false;
        setTimeout(scrollHandling.reallow, scrollHandling.delay);
        var offset = $(button).offset().top - $(window).scrollTop();
        if ( 2000 > offset ) {
            loading = true;
            $.ajax({
                url: ajaxinfinitescroll.ajaxurl,
                type: \'post\',
                data: {
                    action: \'txcap_ajax_scroll\',
                    page: page,
                    query: ajaxinfinitescroll.query
                },
                success: function(result) {
                    console.log(result);
                    $(\'.fdm-blog-container\').append( result.data );
                    $(\'.fdm-blog-container\').append( button );
                    page = page + 1;
                    loading = false;
                },
                fail: function( xhr, textStatus, e ) {
                    console.log(xhr.responseText);
                }
            })
        }
    }
});
});

这是我的主要WP\\U查询循环，我正在向其中添加无限滚动方法（此代码位于页面模板中）：

<div class="fdm-blog-container">
                <?php
                $paged = ( get_query_var( \'paged\' ) ) ? get_query_var( \'paged\' ) : 1;
                $args_main = array(
                    \'post_type\' => \'post\',
                    \'posts_per_page\' => 1,
                    \'paged\' => $paged,
                    \'post_status\' => \'publish\'
                );

                $query_main = new WP_Query( $args_main );

                if ( $query_main->have_posts() ) {
                    $post_count = 1;
                    while ( $query_main->have_posts() ) {

                        $query_main->the_post();

                        ?>

                        <article id="post-<?php the_ID(); ?>" 
                            <?php if ( $post_count % 3 == 0): ?>
                                class="fdm-post fdm-standard last"
                            <?php elseif ( $post_count % 4 == 0 ): ?>
                                class="fdm-post fdm-half-left"
                            <?php elseif ( $post_count % 5 == 0 ): ?>
                                class="fdm-post fdm-half-right"
                            <?php else: ?>
                                class="fdm-post fdm-standard"
                            <?php endif; ?> >

                            <img src=\'<?php the_post_thumbnail_url("fdm_blog") ?>\'>
                            <div class="fdm-postlist-item-overlay"></div>
                            <div class="fdm-postlist-item-content">
                                <div class="fdm-postlist-item-title">
                                    <a href="#"><h3><?php the_title(); ?></h3></a>
                                </div>
                                <div class="fdm-postlist-item-data">
                                    <span><?php the_time(\'F jS, Y\'); ?></span> • <span><?php the_author_posts_link(); ?></span>
                                </div>
                            </div>

                        </article>

                        <?php
                        $post_count++;

                    }

                    ?>




                <?php

                } 

                ?>

            </div>

        <?php wp_reset_postdata();

提前非常感谢您。我一直在为此头痛不已！

小码农CODE

相关推荐

使用AJAX发出POST请求会返回400错误(不使用jQuery)