javascript - 使用 ajax 加载更多 wordpress 的重复帖子

Question

滚动时我的网站上有 ajax 加载帖子。问题在于重复帖子的出现。我不明白为什么会这样。只有一些帖子有重复。这是我在 function.php 中的代码:

    function loadmore_get_posts(){
      $paged = !empty($_POST['paged']) ? $_POST['paged'] : 1;
      $paged++;
    
      $args = array(
        'paged' => $paged,
        'posts_per_page' => $_POST['posts_per_page'],
        'post_type'      => 'post',
        'post_status' => 'publish',
        'cat' => $_POST['cats']
        );
    
      query_posts($args);
     
      while( have_posts() ) : the_post();
        get_template_part( 'this is template' );    
      endwhile;
      die;
    }
    add_action('wp_ajax_loadmore', 'loadmore_get_posts');
    add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');

这是普通 javascript 中的 ajax:

    let ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
    let section_posts = 1;
    let postData = new FormData();
    
    postData.append('action', 'loadmore');
    postData.append('paged', section_posts);
    postData.append('posts_per_page', 9);
    postData.append('cats',  <?php print json_encode(get_selected_cats())?>);
    
      const xhr = new XMLHttpRequest();
      xhr.open('POST', ajaxurl);
    
      xhr.addEventListener('readystatechange', function (data) {
      if (this.readyState === 4 && this.status === 200) {
         section_posts++;
         document.querySelector('.articlefeed_template').innerHTML += data.target.responseText;
      } else {}
         xhr.send(postData);
      }

请告诉我我错在哪里？谢谢!

Answer 1

我建议不要使用 query_posts 而是使用 wp_query。

  function loadmore_get_posts(){
    $paged = ! empty( $_POST['paged'] ) ? $_POST['paged'] : 1;
    $paged++;

    $args = array(
        'paged' => $paged,
        'posts_per_page' => $_POST['posts_per_page'],
        'post_type'      => 'post',
        'post_status' => 'publish',
        'cat' => $_POST['cats']
    );

    $data = new WP_Query( $args );
    $count_posts = $data->found_posts;

    while( $data->have_posts() ) : $data->the_post();
    get_template_part( 'this is template' );    
    endwhile;
    die;
}
add_action( 'wp_ajax_loadmore', 'loadmore_get_posts' );
add_action( 'wp_ajax_nopriv_loadmore', 'loadmore_get_posts' );

此处您还需要总帖子数，以隐藏加载更多按钮，当帖子完成时。检查上面的代码，我添加了 $count_posts 变量。

你还没有通过 offset 吗？

在您的 JS 文件中也传递以下参数

var total_post = '<?php echo $count_posts; ?>';

postData.append('offset', section_posts*9);
postData.append('totalPost', total_post);

阅读更多关于 offset 的信息这里