WordPress load more posts with ajax not working

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><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; ?>

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)