Javascript AJAX请求重复项

我使用AJAX来“显示更多”。目前，我的自定义帖子类型最初显示为12，当单击“显示更多”按钮时，页面上又加载了12个

帖子类型

问题：第一次单击后，将显示12。但每次单击继续，它都会继续重复先前填充的12项

问题：当用户单击“显示更多”时，我如何正确使用AJAX在12秒内显示帖子

Functions.php中的AJAX处理程序

function ajax_more_team($offset) {

  $offset = $offset + 12;
  header("Content-Type: text/html");

  $args = array(
      'suppress_filters' => true,
      'post_type'   =>  'team',
      'posts_per_page'  =>  12,
      'offset'  =>  $offset,
  );

  $the_query = new WP_Query($args);

     if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();

          //Loop content            

        endwhile;
     endif;
  wp_reset_postdata();
  die($out);
}

<div id="ajax_posts" class="row">

        <?php
            $args = array(
                'post_type' =>  'team',
                'posts_per_page'    =>  12
            );
            $the_query = new WP_Query($args);
        ?>

        <?php if($the_query->have_posts()) : while($the_query->have_posts()) : $the_query->the_post(); ?>
            <?php $id = get_the_id(); ?>
            <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
                <div class="team-member">
                    <a href="#" data-toggle="modal" data-target="#<?php echo $id ?>">
                        <img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="<?php the_field('employee_name'); ?>">
                    </a>
                    <div class="team-info">
                        <h6><?php the_field('employee_name'); ?></h6>
                    </div>
                    <a href="" data-toggle="modal" data-target="#myModal">
                        <div class="modal-icon">
                            <img class="img-fluid" src="<?php bloginfo('template_directory');?>/imgs/modal-icon.svg">
                        </div>
                    </a>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="<?php echo $id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="team-close-btn">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="Alice George">
                                <div class="team-info">
                                    <h6><?php the_field('employee_name'); ?></h6>
                                    <p><strong>Title:<br></strong> <?php the_field('employee_title'); ?></p>
                                    <p><strong>Company:<br></strong> <?php the_field('employee_company'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; endif; ?>
    </div>
    <?php 
        if( $the_query->max_num_pages > 1)
        echo '<div id="more_posts" class="btn-primary mt-4">View More</div>'
    ?>
    <?php wp_reset_postdata(); ?>
</div>

Jquery函数

var count = 0;

function load_more_team(count) {

    var count = count + 12

    var button = $('#more_posts'),
        data =  {
            'action': 'ajax_more_team',
            'offset': count
        }

    $.ajax({
        url: team_ajax.ajaxurl,
        data: data,
        type: 'POST',
        dataType: 'html',
        success: function(data){
            if(data.length){
                $("#ajax_posts").append(data);
                button.attr("disabled",false);

            } else{
                button.attr("disabled",true);
            }
        }
    });
    return false;
}

$('#more_posts').click(function() {
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_more_team();
});

编辑：
为了添加一点额外的上下文，我添加了初始页面模板循环

page.php

function ajax_more_team($offset) {

  $offset = $offset + 12;
  header("Content-Type: text/html");

  $args = array(
      'suppress_filters' => true,
      'post_type'   =>  'team',
      'posts_per_page'  =>  12,
      'offset'  =>  $offset,
  );

  $the_query = new WP_Query($args);

     if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();

          //Loop content            

        endwhile;
     endif;
  wp_reset_postdata();
  die($out);
}

<div id="ajax_posts" class="row">

        <?php
            $args = array(
                'post_type' =>  'team',
                'posts_per_page'    =>  12
            );
            $the_query = new WP_Query($args);
        ?>

        <?php if($the_query->have_posts()) : while($the_query->have_posts()) : $the_query->the_post(); ?>
            <?php $id = get_the_id(); ?>
            <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
                <div class="team-member">
                    <a href="#" data-toggle="modal" data-target="#<?php echo $id ?>">
                        <img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="<?php the_field('employee_name'); ?>">
                    </a>
                    <div class="team-info">
                        <h6><?php the_field('employee_name'); ?></h6>
                    </div>
                    <a href="" data-toggle="modal" data-target="#myModal">
                        <div class="modal-icon">
                            <img class="img-fluid" src="<?php bloginfo('template_directory');?>/imgs/modal-icon.svg">
                        </div>
                    </a>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="<?php echo $id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="team-close-btn">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="Alice George">
                                <div class="team-info">
                                    <h6><?php the_field('employee_name'); ?></h6>
                                    <p><strong>Title:<br></strong> <?php the_field('employee_title'); ?></p>
                                    <p><strong>Company:<br></strong> <?php the_field('employee_company'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; endif; ?>
    </div>
    <?php 
        if( $the_query->max_num_pages > 1)
        echo '<div id="more_posts" class="btn-primary mt-4">View More</div>'
    ?>
    <?php wp_reset_postdata(); ?>
</div>


更新到您的代码，这应该适合您。我认为计数有点混乱，因为对我来说，它不是一个立即明确的总数还是当前页面

不确定如何在PHP函数中接收$offset值，但这里的$offset应该只是POST值'offset'，no+12或其他值。这样，在第一次调用时，偏移量为0，并从第1行开始获取前12条记录，下一次偏移量为12，并获取下12条记录（从第13行开始）。您的每页帖子数量保持在12，而偏移量会成倍增加。偏移量表示从哪些记录开始，它应开始接受“每页发布”金额

-

您需要的是count*12，而不是+。递增后打印出count的值；如果按预期运行，则在PHP函数的开头使用var_dump$offset。@TimvanUum no，0*12=0@TimvanUum那不是成倍增加了吗？第一次点击是1，1*12=12，第二次点击是2，2*12=24。显示24个元素。我只想一次显示12个元素。不确定您是如何在PHP函数中接收$offset值的，但这里的$offset应该是POST值'offset'，no+12或任何东西。这样，在第一次调用时，偏移量为0，并从第1行开始获取前12条记录，下一次偏移量为12，并获取下12条记录（从第13行开始）。您的每页帖子数量保持在12，而偏移量会成倍增加。偏移量表示从哪些记录开始，它应开始接受“每页发布”金额。关于javascript部分，请参阅我的答案。因此，您不是说，
$offset=$offset+12
在my functions.php中应该是
$offset=$\u POST['offset']
？是的，或者如果$offset有正确的值，就使用参数。不确定wordpress是如何处理这些事情的：）$\u POST['offset']应该可以工作。我最初用作参考的问题在这里，但没有回答：我已经到了现在的地步。Tim，代码在经过修补和一些编辑后工作正常。如果你可以编辑以下代码，我将接受答案。第一个是
var page=0
，它必须是
var page=1
，否则它将返回当前显示的12并导致重复。第二个是页面增量，目前它在AJAX请求中，应该在AJAX请求之外。否则您将收到一个“意外标识符”错误编辑了我的答案，但是0应该是正确的，您的前12个已经没有ajax请求了吗？页面增量超出了成功函数的范围。必须在内部，比整个ajax请求的外部更好。这可以防止对按钮的垃圾邮件。另外，在页面中添加post状态。phpUsing paged参数是正确的方法。offset参数用于跳过查询中的帖子，paged参数用于允许分页的每页边帖子。在当前场景中，偏移量可以用于，但我建议使用paged参数
var page = 2; // first page already loaded

function load_more_team() {
var button = $('#more_posts'),
    data =  {
        'action': 'ajax_more_team',
        'paged': page
    }

$.ajax({
    url: team_ajax.ajaxurl,
    data: data,
    type: 'POST',
    dataType: 'html',
    success: function(data){
        if(data.length){
            $("#ajax_posts").append(data);
            button.attr("disabled",false);

        } else{
            button.attr("disabled",true);
        }
        page++; // increment page after request
    }
});
return false;
}

function ajax_more_team() {
  $paged = $_POST['paged'];
  header("Content-Type: text/html");

  $args = array(
      'suppress_filters' => true,
      'post_type'   =>  'team',
      'post_status' => 'publish',
      'posts_per_page'  =>  12,
      'paged'  =>  $paged,
  );

  $the_query = new WP_Query($args);

     if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();

          //Loop content            

        endwhile;
     endif;
  wp_reset_postdata();
  die($out);
}