Ajax化一个网站，以便加载.php页面而不刷新页面

Question

我一直在使用以下帖子的顶部答案中的代码：

Need help understanding how to ajaxify a web site

当我尝试使用.html页面时，它正常工作，如示例所示。但是，我的页面是在PHP中。一切都在使用php页面工作，除了当url更新时它显示为.html而不是.php。

在代码中，取自我提到的答案：

 <script type="text/javascript">

var directory = 'content/'; //directory of the content we want to ajax in
var state = History.getState();

//for when they click on an ajax link
$('.ajaxify').on('click', function(e){
    var $this = $(this);
    var href = $this.attr('href'); // use the href value to determine what content to ajax in
    $.ajax({
        url: directory + href + '.html', // create the necessary path for our ajax request
        dataType: 'html',
        success: function(data) {
            $('#content').html(data); // place our ajaxed content into our content area
            History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
        }
    });
    e.preventDefault(); // we don't want the anchor tag to perform its native function
});

//for when they hit the back button
$(window).on('statechange', function(){
    state = History.getState(); // find out what we previously ajaxed in
    $.ajax({
        url: directory + state.title + '.html', //create our path
        dataType: 'html',
        success: function(data) {
            $('#content').html(data);
        }
    });
});
</script>

我尝试过更改

 $.ajax({
    url: directory + href + '.html', // create the necessary path for our ajax request
    dataType: 'html',
    success: function(data) {
        $('#content').html(data); // place our ajaxed content into our content area
        History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
    }
});

to（将.html更改为.php）：

 $.ajax({
    url: directory + href + '.php', // create the necessary path for our ajax request
    dataType: 'html',
    success: function(data) {
        $('#content').html(data); // place our ajaxed content into our content area
        History.pushState(null,href, href + '.php'); // change the url and add our ajax request to our history
    }
});

然而，这没有效果。我也尝试过更改HTML：

 <ul id="nav">
    <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li>
    <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li>
    <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li>
    <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li>
</ul>

<div id="content">Home Content</div>

to（将.php添加到hrefs）：

 <ul id="nav">
    <li id="home-link"><a href="home.php" class="ajaxify" title="Home">Home</a></li>
    <li id="work-link"><a href="work.php" class="ajaxify" title="Work">Work</a></li>
    <li id="labs-link"><a href="labs.php" class="ajaxify" title="Labs">Labs</a></li>
    <li id="blog-link"><a href="blog.php" class="ajaxify" title="Blog">Blog</a></li>
</ul>

<div id="content">Home Content</div>

但这会阻止页面加载完全正常工作。任何建议将不胜感激。谢谢！