PHP日历分页AJAX问题

我试图将AJAX分页添加到我的日历中，以避免重新加载整个站点，因为日历位于次要选项卡中，重新加载时重置为主要选项卡。通常，我的"NEXT MONTH"按钮会被包裹在一个链接中，该链接使用日期的get值刷新同一页面，如下所示:

<a href="?date=<?php echo $nextDate; ?>">
    <button type="button" class="btn">
        NEXT MONTH
    </button>
</a>

效果很好。但是，当我试图将表单中的$nextDate值传递给AJAX并重新加载页面时，就好像它没有拾取post值一样。

<form method="post">
    <input type="hidden" class="form-control" name="the_date" value="<?php echo $prevDate; ?>" />
        <button type="button" data-name="next-month" class="btn">
            NEXT MONTH
        </button>
</form>

$("body").on( "click", "[data-name='next-month']", function() { 
    var the_date = $(this.form).find(".form-control[name=the_date]").val();
        ajaxRequest = $.ajax({
            type: "POST",
            url: "index.php",
            data: { the_date: the_date}
   }).done(function (result) {
            alert(the_date)
            $("#calendar_container").load("index.php #calendar_container");
   })
});

我去这个正确的方式，或者有某种原因为什么post值不拿起时，将它们发送到相同的url?如果你对我如何解决这个问题有任何建议，那我就太高兴了!