javascript - 如何使用ajax(WordPress)添加加载更多以获取自定义查询数据？

Question

我正在尝试从 WordPress 中的自定义查询循环加载更多帖子，我创建了自定义帖子类型“企业”，并希望通过单击“加载更多”按钮加载“更多企业”。 我正在使用 Visual Composer 简码来添加 Businesses 的内容。我已成功创建加载更多按钮来获取更多业务，但它在提到的“id”内部以及该 ID 外部附加数据。我无法检测到该问题。

这是我的代码: 在functions.php中我添加了这个本地化脚本::

wp_localize_script( 'test-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'test'),
    'page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,     
));

我的 main.js 文件代码包含 ajax 调用，如下所示::

function load_posts(data, button, wrapper, max_page, load_more_txt ="View All"){
       $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: data,
            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success: function(data){
                if( data ) {
                    button.text( load_more_txt ).prev().before(data);
                    ajax_posts.page++;
                wrapper.append(data);
                    if ( ajax_posts.page == max_page ) {
                        button.remove();
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
             $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
       });
       return false;
    }

我已在 document.ready::上调用了此函数

   $("#more_posts").on("click",function(){
        var el = $("#more_posts");
        // Disable the button.
       el.attr("disabled",true);

       var business_category = el.data('business_category');
       var business_location = el.data('business_location');
       var business_industry = el.data('business_industry');
       var post_count = el.data('post_count');
       var offset = el.data('offset');
       var max_page = el.data('max_page');

       //shortcode enable/disable options value
       var show_business_review = el.data('show_business_review');
       var show_features = el.data('show_features');
       var show_buy_giftcard = el.data('show_buy_giftcard');
       var show_book_online_button = el.data('show_book_online_button');
       var enable_coupon_discount = el.data('enable_coupon_discount');
       var show_get_free_cleaning_btn = el.data('show_get_free_cleaning_btn');

       data = {
        'business_category': business_category,
        'business_location': business_location,
        'business_industry': business_industry,
        'post_count': post_count,
        'offset': offset,
        'page': ajax_posts.page,
        'show_business_review': show_business_review,
        'show_features': show_features,
        'show_buy_giftcard': show_buy_giftcard,
        'show_book_online_button': show_book_online_button,
        'enable_coupon_discount': enable_coupon_discount,
        'show_get_free_cleaning_btn': show_get_free_cleaning_btn,
        'action': 'more_post_ajax'
    }
    var wrapper = $("#marketplace-businesses");
    var loadMoreTxt = "View All";
    // call load more posts function
       load_posts(data, el, wrapper, max_page, loadMoreTxt);
    });

在此之后，我添加了获取ajax数据并加载新帖子的功能::

function more_post_ajax(){
    header("Content-Type: text/html");
    $business_category = (isset($_POST['business_category'])) ? $_POST['business_category'] : '';
   $business_location = (isset($_POST['business_location'])) ? $_POST['business_location'] : '';
   $business_industry = (isset($_POST['business_industry'])) ? $_POST['business_industry'] : '';
   $post_count = (isset($_POST['post_count'])) ? $_POST['post_count'] : 2;
   $page = (isset($_POST['page'])) ? $_POST['page'] + 1 : 1;
   $offset = (isset($_POST['offset'])) ? $_POST['offset'] : '';
   // shortcode enable disable options
   $show_business_review = (isset($_POST['show_business_review'])) ? $_POST['show_business_review'] : true;
   $show_features = (isset($_POST['show_features'])) ? $_POST['show_features'] : true;
   $show_buy_giftcard = (isset($_POST['show_buy_giftcard'])) ? $_POST['show_buy_giftcard'] : true;
   $show_book_online_button = (isset($_POST['show_book_online_button'])) ? $_POST['show_book_online_button'] : true;
   $enable_coupon_discount = (isset($_POST['enable_coupon_discount'])) ? $_POST['enable_coupon_discount'] : true;
   $show_get_free_cleaning_btn = (isset($_POST['show_get_free_cleaning_btn'])) ? $_POST['show_get_free_cleaning_btn'] : true;

   if($business_category != "") {
      $args = array(
         'tax_query' => array(
            'relation' => 'AND',
            array('taxonomy' => 'business_location', 'field'    => 'slug', 'terms'    => array($business_location)),
            array('taxonomy' => 'business_industry', 'field'    => 'slug', 'terms'    => array($business_industry)),
            array('taxonomy' => 'business_category', 'field'    => 'slug', 'terms'    => $business_category)),
      );
   } else {
      $args = array(
         'tax_query' => array(
            'relation' => 'AND',
            array('taxonomy' => 'business_location', 'field'    => 'slug', 'terms'    => array($business_location)),
            array('taxonomy' => 'business_industry', 'field'    => 'slug', 'terms'    => array($business_industry)),
         ),
      );
   }
   $args['post_type'] = 'business';
   $args['posts_per_page'] = $post_count;
   $args['post_status'] = 'publish';
    $updated_offset = (($page - 1) * $post_count);
    $args['offset'] = $updated_offset;
   $loop = new WP_Query($args);
   $out = '';
   if ($loop -> have_posts()) :
    while ($loop -> have_posts()) : $loop->the_post(); $post_id = get_the_ID();
            $out .= '<div class="businesses-wrap-content mb-10">';
            $out .= '<div class="d-flex">';
            $out .= '<div class="content-wrap pr-15"><div class="business-title"><h5 class="text-dark mb-2">'.get_the_title().'</h5>';
         $out .= '</div></div>'; //  content-wrap pr-15 closed
            $out .= '</div>'; // d-flex closed
            $out .= '</div>';
    endwhile;
   endif;
   wp_reset_postdata();
   die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

现在它的输出为::

--appended data
<div id="marketplace-businesses">
--appended data
</div>

单击“加载更多”按钮时，它会显示输出两次，一次在包装器 div 外部，另一次作为包装器 div 的最后一个子级。

如何显示仅加载更多数据作为包装器 div 的最后一个子元素？我在这里做错了什么？

Answer 1

我使用了 button.text( load_more_txt ).prev().before(data); 它会为我复制数据。现在我只是使用 button.text( load_more_txt ); 在加载后显示按钮文本。现在检查这个功能。

function load_posts(data, button, wrapper, max_page, load_more_txt ="View All"){
       $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: data,
            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success: function(data){
                if( data ) {
                    //button.text( load_more_txt ).prev().before(data);
                    button.text( load_more_txt );
                    ajax_posts.page++;
                wrapper.append(data);
                    if ( ajax_posts.page == max_page ) {
                        button.remove();
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
             $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
       });
       return false;
    }

这解决了我的问题。