WordPress load more posts with ajax not working - html

Question

I am trying to make a button which can load more posts with ajax, but I'm having a problem.
this is my php code:
<?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><?php the_title(); ?></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">
load more
</div>
<?php endif; ?>
and this is my javascript code:
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');
}
});
}
The error message I'm getting is:
Failed to load resource: the server responded with a status of 404
(Not found)

Answer 1

Instead of using the rewritten URL in Ajax:
url: './page/' + page
Use the URL with paged parameter, like so:
url: '.?paged=' + page
This problem happens a lot, because of .htaccess redirects. I've managed to solve the exact problem using these kinds of URLs.