Question

im用WP_Query分页进行延迟加载工作正常，但内容到达终点时会自我复制当我搜索特定结果时，它会正确显示结果但是之后它仍然想要进行延迟加载，因此它会加载随机数据

这是我的代码

lazy-load.php

    <?php 

add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'unit',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    if ( ! is_null($_POST['offer']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_hot',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if ( ! is_null($_POST['purpose']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_vacation',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if (!empty($_POST['project'])){
        $args['meta_query'] = array (
            array(
                'key' => 'WAKEB_project',
                'value' => $_POST['project'],
                'compare' => '='
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) : 
        while($query->have_posts()){ $query->the_post(); 
            get_template_part("template-parts/units"); 
        } 
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

add_action('wp_ajax_nopriv_load_projects_by_ajax', 'load_projects_by_ajax_callback');
add_action('wp_ajax_load_projects_by_ajax', 'load_projects_by_ajax_callback');

function load_projects_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( ! is_null($_POST['ptype']) ) {
        $args['tax_query'] = array (
            array(
                'taxonomy' => 'pptypes',
                'field'    => 'slug',
                'terms'    => $_POST['ptype'],
            ),
        );
    }
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) :
        while($query->have_posts()){ $query->the_post();
            get_template_part("template-parts/projects");
        }
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

lazy-load.js

    $('.unit-terms li a').each( function() {
    if ( this.href == window.location.href ) {
        $(this).parent().addClass('current');
    }
});

main.js

    (function($){
  $('.isotope a').on('click', function(){
    $('.isotope .active').removeClass('active');
    $(this).addClass('active');
    var filter = $(this).data('filter');
    if(filter=='*'){
    $('.property').show();
  }else{
    $('.property').not(filter).hide();
    $('.property'+filter).show();
  }
  return false;
  });
})(jQuery);

那我怎么使它工作呢？我不知道我在这里做什么错

这是整个项目的回购链接 https://github.com/Ov3rControl/hoomerz

Answer 1

好的，现在我明白了你的意思了；）在延迟加载期间，您只发送给后端页号，而没有当前状态的过滤器和/或搜索字符串。因此，它仅根据页码发送所有posttype项目。您还应该发送过滤器的当前状态

main.js：将其添加到页面加载后功能：

var currentUrl =新的URL（window.location.href）; var searchQuery = urlObj.searchParams.get（“ k”）;

lazy-load.js：将搜索参数添加到发布到后端的数据中

var data = {
    'action': 'load_posts_by_ajax',
    'page': page,
    'search: searchQuery // new field
};

lazy-load.php：将搜索参数添加到WP_Query

if ( isset($_POST['search']) && !empty($_POST['search']) ){ // new section
    $args['s'] = sanitize_text_field($_POST['search']);
}

这是文本搜索过滤器的示例。对于所有过滤器，您必须

1. match every filter from front (URL get param) (main.js)
2. than put it in data object sent to backend (lazy-load.js)
3. address this variable in lazy-load.php in if(isset($_POST['param-name'])) section ( new or existing one as there are some )

Answer 2

我建议尝试不使用ob_start（）/ ob_get_clean（）。另外，如果您生成的是html而不是原始数据结构，那么我只需将其打印输出即可，而无需wp_send_json_success（）。

其他解决方案是发送原始数据（1. php中的数组，2。json_encode（），3。wp_send_json（）），而不是使用javascript处理（在请求后端后创建动态dom元素）。

使用分页进行Wordpress延迟加载

2 个答案: