我有一个简单的帖子，我正在使用 alipine.js 来帮助我使用 AJAX 加载帖子。
到目前为止，如果我单击过滤器按钮，它会加载我的页面并更改类别，这都是预期的并且有效。
但是我已经更新了我的代码以在单击“加载更多按钮”时显示更多内容，但这没有显示并且没有错误。
有人能看出我哪里出了问题吗？
问题 如果我点击“加载更多”，则会收到更多相同类型的帖子，而不是 10 个新帖子。
我相信代码已经非常接近工作了。它点击加载我的帖子，就像已经加载一样。
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
Alpine.data("filterPosts", (adminURL) => ({
posts: "",
limit: 6,
total: null,
category: null,
post_type_js: post_id,
showDefault: true,
showFiltered: false,
offset: 0,
filterPosts(id) {
this.showDefault = false;
this.showFiltered = true;
this.category = id;
this.offset = 0; // <-- reset offset to zero
this.fetchPosts();
},
loadMore() {
this.loadingMore = true;
this.offset += 10;
this.showFiltered = true;
this.fetchPosts(true);
},
fetchPosts(append = false) {
var formData = new FormData();
formData.append("action", "filterPosts");
formData.append("limit", this.limit);
formData.append("post_type_js", this.post_type_js);
formData.append("offset", this.offset); // <-- Add new data to the form
if (this.category) {
formData.append("category", this.category);
}
fetch(adminURL, {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((res) => {
if (append) {
// Appends posts to the end of existing posts data
this.posts = this.posts.concat(res.posts);
} else {
// Resets the posts data with new data
this.posts = res.posts;
}
this.loading = false;
});
},
getTotal() {
var formData = new FormData();
formData.append("action", "filterPosts");
fetch(adminURL, {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((res) => {
this.total = res.total;
});
},
init() {
this.getTotal();
}
}));
})
</script>
</head>
<body>
<div x-data="filterPosts('<?php echo admin_url('admin-ajax.php'); ?>')">
<section <?php theme_section_attr_id() ?> <?php theme_section_attr_class('main-section js-posts') ?>>
<div class="container">
<div class="heading mx-0">
<?php $before_title = get_sub_field('before_title');
if ($before_title) : ?>
<strong class="sub-title"><?php echo $before_title ?></strong>
<?php endif ?>
<?php $title = get_sub_field('title');
if ($title) : ?>
<h2><?php echo $title ?> </h2>
<?php endif ?>
</div>
<div class="head js-posts-search-text">
<?php if ($search_value) : ?>
<h2 class="h5 fw-semibold"><?php printf(__('Showing results for “%s”', 'base'), $search_value) ?></h2>
<?php endif ?>
</div>
<!--alipne js dynamic post start-->
<div class="has-filter row flex-md-row-reverse">
<div class="col-md-8 col-lg-9 js-posts-holder">
<!-- Posts Column -->
<div x-show.important="showDefault" class="row cards-area js-posts-items">
<!-- Default posts query -->
<?php get_template_part( 'template-parts/posts-filter/default-query' ); ?>
</div>
<!-- Filtered posts -->
<div x-show.important="showFiltered" x-html="posts"class="row cards-area js-posts-items">
</div>
<!-- Load More Posts -->
<!-- Load More Posts -->
<div @click="loadMore()" class="text-center mt-12 pt-5">
<button class="">
Load More
</button>
</div>
</div>
<!-- Filtered posts -->
<div class="col-md-4 col-lg-3">
<?php get_template_part( 'template-parts/posts-filter/filter-query' ); ?>
<!-- Filtered end -->
</div>
</div>
</div>
<!--alipne js dynamic post end-->
</section>
</div>
</body>
</html>
// the ajax function
add_action('wp_ajax_filterPosts', 'filterPosts');
add_action('wp_ajax_nopriv_filterPosts', 'filterPosts');
function filterPosts()
{
$response = [
'posts' => "",
];
// New args for an All Posts Query
$all_args = array(
'posts_per_page' => -1, // returns all posts
'post_status' => 'publish',
);
$filter_args = array(
'post_status' => 'publish',
);
if ($_POST['limit']) {
$filter_args['posts_per_page'] = $_POST['limit'];
}
if ($_POST['post_type_js']) {
$filter_args['post_type'] = $_POST['post_type_js'];
}
if ($_POST['category']) {
$filter_args['cat'] = $_POST['category'];
// Get the total number of posts for the category
$all_args['cat'] = $_POST['category'];
}
$filter_query = new WP_Query($filter_args);
// New All Posts Query
$all_query = new WP_Query($all_args);
if ($filter_query->have_posts()):
while ($filter_query->have_posts()):
$filter_query->the_post();
$response['posts'] .= load_template_part('/template-parts/posts-filter/single-post');
endwhile;
wp_reset_postdata();
endif;
echo json_encode($response);
die();
}
function load_template_part($template_name, $part_name = null, $args = [])
{
ob_start();
get_template_part($template_name, $part_name, $args);
$var = ob_get_contents();
ob_end_clean();
return $var;
}
您没有使用 'offset' 参数，请将其添加到 $filter_args:
$filter_args = array(
'post_status' => 'publish',
);
if (isset($_POST['offset'])) { // <<<< THIS
$filter_args['offset'] = max (0, (int)$_POST['offset']);
}
if ($_POST['limit']) {
$filter_args['posts_per_page'] = $_POST['limit'];
}
// .....
我还建议您像我一样为 $_POST 参数添加最少的验证