使用Ajax，PHP和MySQL进行无限滚动时出错

Question

I am trying to implement an infinite scroll in my application but at the moment of reaching the end of my page, this throws the error that places.

This is the ajax code:

<script type="text/javascript">
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            var last_id = $(".post-id:last").attr("id");
            loadMoreData(last_id);
        }
    });

    function loadMoreData(last_id){
      $.ajax(
            {
                url: '/loadMoreData.php?last_id=' + last_id,
                type: "get",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .done(function(data)
            {
                $('.ajax-load').hide();
                $("#post-data").append(data);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('server not responding...');
            });
    }
</script>

Here, is where I show the data from th DataBase:

<?php while ($post = $result -> fetch(PDO::FETCH_ASSOC)){ ?>

    <div class="box-list" id="post-data">
        <div class="item">
            <div class="row">
              <p class="post-id hidde" id="<?php echo $post['id']; ?>">
                <div class="col-md-1 hidden-sm hidden-xs">
                    <div class="img-item"><img src="<?php echo OTRA; ?>/images/<?php echo $post['thumb']; ?>" alt=""></div>
                </div>
                <div class="col-md-11">
                    <h3 class="no-margin-top"><a href="single.php?id=<?php echo $post['id']; ?>"><?php echo $post['titulo']; ?> <i class="fa fa-link color-white-mute font-1x"></i></a></h3>
                    <h5><span class="color-black"><?php echo $post['company']; ?></span> - <span class="color-white-mute"><?php echo $post['locacion']; ?></span></h5>
                    <p class="text-truncate "><?php echo $post['extracto']; ?></p>
                    <div>
                    <span class="color-white-mute"><?php echo fecha($post['fecha']); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } ?>

and this id the other PHP file to load more data:

<?php session_start();

require 'extras/config.php';
require 'functions.php';

comprobarSession();

$conexion = conexion($bd_config);

$qry = "SELECT * FROM publications WHERE id > '$_GET['last_id']' ORDER BY id DESC LIMIT 8";
$result = $conexion->query($qry);
print_r ($result);

$json = include('views/empleos.php');

echo json_encode($json);

on the Developer Tool of Chrome the error that show me is

jquery.js:8706 GET http://localhost/loadMoreData.php?last_id=9 404 (Not Found)

Answer 1

What is the name of that php file? Sounds like it is not loadMoreData.php? Perhaps it is loadData.php, and the AJAX call should be changed?