我正在尝试创建一个可使用ajax加载更多帖子的按钮,但是我遇到了问题。
这是我的php代码:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
"post_type" => "portfolio",
"posts_per_page" => 2,
"paged" => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) :
?>
<div class="row" id="portfolio-posts">
<?php
$page_layout = get_field("page_layout");
$page_class = "";
if($page_layout == "1") {
$page_class = "col-md-4";
} else {
$page_class = "col-md-3";
}
while($query->have_posts()) : $query->the_post(); ?>
<div class="<?php echo $page_class; ?> single-post">
<div class="project-con project2-con">
<div class="overlay">
<div class="overlay-inner">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<hr>
<span><?php echo get_the_term_list( $post->ID, 'masonry-categories', '', ', '); ?></span>
</div>
</div>
<?php
if(has_post_thumbnail()) {
the_post_thumbnail("portfolio");
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/assets/images/default.png" />';
}
?>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="button">
<a href="#" id="load-more-posts">load more</a>
</div>
<?php endif; ?>
这是我的JavaScript代码:
var page = 1;
var loadMorePosts = jQuery('#load-more-posts').text();
function loadMore() {
page++;
$.ajax({
type: "GET",
url: './page/' + page,
beforeSend: function () {
jQuery('#load-more-posts').html("<i class='fa fa-spinner fa-spin'></i>");
},
complete: function () {
},
success: function (data) {
var $data = jQuery(data).find('.single-post,.single-blog');
if ($data.length > 0) {
jQuery('#load-more-posts').html(loadMorePosts);
jQuery('#portfolio-posts,#blog-posts').append($data);
$data.css("display", "none");
$data.fadeIn("slow");
}
else {
jQuery('#load-more-posts').html('No More Posts');
}
},
error: function () {
jQuery('#load-more-posts').html('No More Posts');
}
});
}
我收到的错误信息是:
无法加载资源:服务器响应状态为404(未找到)
page/' + page
吗? - Cyclonecode