您好,我正在通过分页在WordPress中实现延迟加载 它工作正常,但当我向下滚动时会重复数据 例如,如果预期结果仅为4个帖子,而我向下滚动,它会重复重复这4个帖子 这是我的JavaScript代码
<script>
$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var urlString = window.location.href;
var url = new URL( urlString );
var offer = url.searchParams.get("offer");
var purpose = url.searchParams.get("purpose");
jQuery(function($){
$('.property-listings').append( '<span class="load-more"></span>' );
var button = $('.property-listings .load-more'),
page = 2,
loading = false,
scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400
};
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if ( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout( scrollHandling.reallow,scrollHandling.delay );
var offset = $(button).offset().top - $(window).scrollTop();
if ( 2000 > offset ) {
loading = true;
$('.loader-wrap').css({display: 'flex'});
var data = {
'action': 'load_posts_by_ajax',
'page': page,
};
if ( offer ) {
data.offer = offer;
}
if ( purpose ) {
data.purpose = purpose;
}
// console.log(data);
$.post($ajaxurl, data, function(response) {
if( response.data != "" ) {
$('.property-listings .content-wrap').append(response.data);
$('.property-listings').append( button );
page++;
$('.loader-wrap').css({display: 'none'});
loading = false;
}else{
$('.loader-wrap').css({display: 'none'});
scrollHandling.allow = false;
}
});
}
}
});
});
如果发现另一张具有相同名称的卡,有一种告诉它停止的方法
这也是WordPress代码
<?php
/**
* The template for displaying find properties page.
*
* This is the template that displays only find-properties page.
*
* @package WAKEB
*/
get_header();
if (!empty($_GET['region'])){
$args =array(
'post_type' => 'project',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'regions',
'field' => 'id',
'terms' => $_GET['region'],
),
),
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$projectsid[] = get_the_ID();
}
}else{
$projectsid=array(0);
}
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array (
'post_type' => 'unit',
'posts_per_page' => 4,
'paged' => 1,
);
if (!empty($_GET['ctype'])){
$args['tax_query'] = array (
array(
'taxonomy' => 'ctypes',
'terms' => $_GET['ctype'],
),
);
}
if (!empty($_GET['ptype'])){
$args['tax_query'] = array (
array(
'taxonomy' => 'uptypes',
'terms' => $_GET['ptype'],
),
);
}
if (!empty($_GET['pro'])){
$args['meta_key'] = 'WAKEB_project';
$args['meta_value'] = $_GET['pro'];
}
if(!empty($_GET['k'])){
$args['s'] = $_GET['k'];
}
if(isset($projectsid)){
$args['meta_query'][] = array(
'key' => 'WAKEB_project',
'value' => $projectsid,
'compare' => 'IN',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['area1']) && !empty($_GET['area2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => array($_GET['area1'], $_GET['area2']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['area1'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => $_GET['area1'],
'compare' => '>=',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['area2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => $_GET['area2'],
'compare' => '<=',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['price1']) && !empty($_GET['price2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => array($_GET['price1'], $_GET['price2']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['price1'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => $_GET['price1'],
'compare' => '>=',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['price2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => $_GET['price2'],
'compare' => '<=',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['purpose'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_vacation',
'value' => '1',
'compare' => '=',
);
}
if(!empty($_GET['offer'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_hot',
'value' => '1',
'compare' => '=',
);
}
?>
<div class="fixed-search">
<form method="get" action="<?php bloginfo('wpurl'); ?>/find-properties/" name="find-units">
<div class="content-wrap">
<div class="form-group">
<div class="form-field">
<input type="search" placeholder="<?php _e('Search', 'WAKEB'); ?>" name="k" id="k">
</div>
<div class="form-field">
<div id="toggle-ctype" class="filter"><?php _e('Filter by contract type', 'WAKEB'); ?></div>
<div class="dropdwon" id="ctype-select">
<?php
$ctype_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
);
$Contract_types = get_terms('ctypes', $ctype_args);
foreach ($Contract_types as $ctype){
if ( !get_field( 'hide', 'ctypes_'. $ctype->term_id ) ) :
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="ctype[]" value="'.$ctype->term_id.'"><span class="checkmark"></span>'.$ctype->name.'</label>';
echo '</div>';
endif;
}
?>
</div>
</div>
<div class="form-field">
<div id="toggle-ptype" class="filter"><?php _e('Filter by purpose type', 'WAKEB'); ?></div>
<div class="dropdwon" id="ptype-select">
<?php
$ptype_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
);
$Purpose_types = get_terms('uptypes', $ptype_args);
foreach ($Purpose_types as $ptype){
if ( !get_field( 'hide', 'uptypes_'. $ptype->term_id ) ) :
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="ptype[]" value="'.$ptype->term_id.'"><span class="checkmark"></span>'.$ptype->name.'</label>';
echo '</div>';
endif;
}
?>
</div>
</div>
<div class="form-field">
<div id="toggle-proj" class="filter"><?php _e('Filter by compound', 'WAKEB'); ?></div>
<div class="dropdwon" id="proj-select">
<?php
$pro_args = array ('post_type' => 'project', 'posts_per_page' => -1,);
$query = new WP_Query( $pro_args );
if($query->have_posts()){
while($query->have_posts()){
$query->the_post();
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="pro[]" value="'.get_the_ID().'"><span class="checkmark"></span>';
$name = rwmb_meta('WAKEB_card_name');
if ( $name ) { echo $name; }else{ the_title(); }
echo '</label>';
echo '</div>';
}
}
?>
</div>
</div>
</div>
<div class="form-group">
<div class="form-field">
<div id="toggle-regions" class="filter"><?php _e('Filter by region', 'WAKEB'); ?></div>
<div class="dropdwon" id="regions-select">
<?php
echo '<ul>';
draw_tree_for_regions(0);
function draw_tree_for_regions($p_id){
$reg_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
'parent' => $p_id,
);
$allregions = get_terms('regions', $reg_args);
foreach ($allregions as $region){
if ( !get_field( 'hide', 'regions_'. $region->term_id ) ) :
echo '<li><div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="region[]" value="'.$region->term_id.'"><span class="checkmark"></span>'.$region->name.'</label>';
echo '</div>';
$children=get_term_children($region->term_id, 'regions');
if($children){
echo '<ul>';
draw_tree_for_regions($region->term_id);
echo '</ul>';
}
echo '</li>';
endif;
}
}
echo '</ul>';
?>
</div>
</div>
<div class="form-field">
<div id="toggle-area" class="filter"><?php _e('Filter by Area', 'WAKEB'); ?></div>
<div class="dropdwon" id="area-select">
<div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="area1" id="area1" > </div>
<div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="area2" id="area2" ></div>
</div>
</div>
<div class="form-field">
<div id="toggle-price" class="filter"><?php _e('Filter by Price', 'WAKEB'); ?></div>
<div class="dropdwon" id="price-select">
<div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="price1" id="price1" > </div>
<div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="price2" id="price2" > </div>
</div>
</div>
<div class="form-field">
<button type="submit"><?php _e( 'Search', 'WAKEB' ); ?></button>
</div>
</div>
</div>
</form>
</div>
<section class="content-search-result page-section">
<div class="section-title"><h2><?php _e('AVAILABLE UNITS', 'WAKEB'); ?></h2></div>
<ul class="unit-terms">
<div class="content-wrap">
<?php
$tax_args = array( 'taxonomy' => 'utypes', 'hide_empty' => false );
$ptypes = get_terms( $tax_args );
foreach ( $ptypes as $ptype ) {
echo '<li><a href="'. get_term_link( $ptype->term_id ) .'">'. $ptype->name .'</a></li>';
}
?>
</div>
</ul>
<?php
$query = new WP_Query( $args );
if($query->have_posts()){ ?>
<ul class="property-listings">
<div class="content-wrap">
<?php
while ( $query->have_posts() ) : $query->the_post();
get_template_part("template-parts/units");
endwhile;
?>
</div>
</ul>
<?php echo '<div class="loader-wrap"><div class="lds-facebook"><div></div><div></div><div></div></div></div>';
}else{
echo '<div class="no-result">'. _e( 'No results found...', 'WAKEB' ) .'</div>';
}
?>
</section>
这是完整的WordPress存储库(使用PHP 5.6)的链接。 https://github.com/Ov3rControl/hoomerz
它重复了数据,如图所示 之后,它仍然从我正在搜索的内容中加载无关的数据 例如,如果我正在埃及寻找公寓 它会从埃及获得所有公寓,然后在我滚动时重复它们,然后我仍会获得数据,但是从不相关的地方,例如美国
这是问题的实时链接 http://beta.hoomerz.com/find-properties/?k=®ion%5B%5D=218&area1=&area2=&price1=&price2= 搜索只能是第一条帖子,并且不应加载任何其他不相关事件数据
答案 0 :(得分:0)
您是从PHP输出上面的脚本代码吗?你有这行:
$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
除非您上面显示的整个脚本在php文件中并且包含echo()或print()语句的一部分,否则它将不起作用。使用wp_localize_script()安全正确地在HTML中输出admin_url('amin-ajax.php')的值,然后使用JavaScript从DOM中获取值并在必要时使用它。
除此之外,您的AJAX调用使用$ .post,但您的PHP正在检查$ _GET。选择一种方法并使用它-在这种情况下,$ _GET更合适。