我正在创建一个WordPress网站。
在其中一个页面中,我有一个 AJAX 调用来加载更多的帖子,在一个循环中有一个按钮。为了将这个循环与Ajax连接起来,我在同一个页面上的div标签中存储了一些变量。
下面是php页面上存储变量的部分代码:
<div id="loader" class="js-ajax-response"
data-current-post-type='<?php echo $current_post_type ?>'
data-current-term-id='<?php echo $current_term_id ?>'
data-posts-myajax='<?php echo serialize( $loop->query_vars ) ?>'
data-current-page-myajax='1'
data-max-page-myajax='<?php echo $loop->max_num_pages ?>'
data-ajax-url='<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/admin-ajax.php'
></div>
使用 AJAX 加载更多帖子的JS代码:
if (document.querySelector('.js-btn-load-more')) {
const el = document.querySelector("#loader");
const current_post_type = el.dataset.currentPostType;
const current_term_id = el.dataset.currentTermId;
const posts_myajax = el.dataset.postsMyajax;
const current_page_myajax = el.dataset.currentPageMyajax;
const max_page_myajax = el.dataset.maxPageMyajax;
const ajax_url = el.dataset.ajaxUrl;
const loaderBtn = document.querySelectorAll('.js-btn-load-more');
var i;
for( i = 0; i < loaderBtn.length; i++ ){
loaderBtn[i].addEventListener('click', function(){
let button = this;
const containerResponse = document.querySelector(".js-ajax-response");
const data = new FormData();
data.append( 'action', 'load_archive' );
data.append( 'archive_post_type', current_post_type );
data.append( 'taxonomy_term_id', current_term_id );
data.append( 'query', posts_myajax );
data.append( 'page', current_page_myajax );
fetch(ajax_url, {
method: "POST",
body: data
})
.then((response) => response.text())
.then((data) => {
if (data) {
containerResponse.innerHTML += data;
locoScroll.update();
button.style.display = "block";
current_page_myajax++;
if ( current_page_myajax == max_page_myajax )
button.style.display = "none"; // If last page, remove the button
}
})
.catch((error) => {
});
});
};
}
问题是,当我点击按钮加载更多帖子时,它总是加载相同的帖子。
如果你需要PHP循环的全部代码,请告诉我。
谢谢大家。
1条答案
按热度按时间mwngjboj1#
检查您的控制台是否有错误...
你已经设置了这个常数
const current_page_myajax = el.dataset.currentPageMyajax;
但你正在尝试更新它。
current_page_myajax++;
这只会产生一个错误。
使用
let current_page_myajax = el.dataset.currentPageMyajax;
或与较旧的浏览器兼容
var current_page_myajax = el.dataset.currentPageMyajax;
const
const声明创建块作用域的常量,就像使用let关键字声明的变量一样。常量的值不能通过重新赋值(即使用赋值运算符)来更改,也不能重新声明(即通过变量声明)。但是,如果常量是对象或数组,则可以更新或删除其属性或项。