我建立一个全面的jQuery驱动的网站，所以我加载所有动态页面使用AJAX来实现页面之间的过渡花哨，最大限度地提高用户体验。 这里是我的javascript code：

I am building a fully jquery powered website, so i am loading all pages dynamically using ajax to achieve fancy transitions between pages and maximize user experience. Here is my javascript code:

$(function() {

    var path = _.compact(location.pathname.split("/"));
    if(path.length<2){
        path = 'home' 
    }else{
        path = path[path.length-1];
    }
    activepage = path;

    $('.nav a').click(function(e) {
        href = $(this).attr("href");            
        loadContent(href);      
        // HISTORY.PUSHSTATE
        window.history.pushState('', 'New URL: '+href, href);   
        e.preventDefault();                     
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event) {
        var path = _.compact(location.pathname.split("/"));
        if(path.length<2){
            path = 'home' 
        }else{
            path = path[path.length-1];
        }           
        loadContent(path);
    };

});



function loadContent(url){  
        // USES JQUERY TO LOAD THE CONTENT
        var adresa = absurl + "ajax/get_content";       
        $.ajax({
          url: adresa,
          contentType: 'application/json',
          data: { url: url },
          success: function(data) {
            switch(url)
            {
                case "projects": $.projects({ data : data }); $.projects.init();
                break;
                case "home": $.homePage({ data : data }); $.homePage.init();
                break;
                default: console.log("nista");
            }
          }
        }); 
}

阿贾克斯函数返回构建JSON格式的网页所需要的所有数据，然后我初始化我的自定义插件，建立使用JSON数据的页面。

Ajax function returns all data needed to build pages in the json format, then i initialize my custom plugin which builds the page using that json data.

所有这些工作完全正常，你可以在此活生生的例子看到，包括浏览器历史记录（向后和向前）。 但这里是我的问题......当页面完全加载主容器是空的，当我看页面的源代码。另外它的空当我尝试抓取页面，谷歌机器人，我是pretty的肯定，这两个是相关的。

All of that works perfectly fine as you can see on this LIVE EXAMPLE, including the browser history (back and forward). But here is my problem... When the page is fully loaded the main container remains empty when i look at the source of the page. Also its empty when i try to fetch the page as google bot and i am pretty sure that these two are related.

正如你可以在这个例子中的pretty的很多相同的code像我有，当你点击链接的来源正在发生变化，它改变了页面内容为好，但没有重新加载页面。 我的问题是，我在这里失踪，以及如何达到同样的效果？我失去了一些PHP code还是什么？我这个挣扎在过去的几天里，我尝试了一切，我不能使它发挥作用。

As you can see on this example with the pretty much same code like i have, the source is being changed when you click on the links and it changes the page content as well, but without reloading the page. My question is, what am I missing here and how to achieve the same effect? Am i missing some php code or what? I am struggling with this over the past few days, I've tried everything and i couldn't make it work.

请注意：只有产品和项目的链接工作现在...

Note: only home and project links are working for now...

非常感谢所有的答复！

推荐答案

pushState 可以让你改变URI的本地部分，当你使用Ajax更新页面内容。

pushState lets you change the local part of the URI when you update the page contents with Ajax.

对于每一个URI所创建的方式，允许服务器不会对JavaScript的任何依赖建立在同一个页面。

For every URI you create that way, allow the server to build the same page without any dependency on JavaScript.

这将：