历史 API - Ajax 页 + Json

Question

我的网站结构如下IMAGE
我正在尝试使用 ajax & history API

创建一些页面转换

代码：

history.pushState(null, null, "/members/" + dataLink + ".php" ); // update URL
console.log(dataLink);
$(".ajax-container").load('/members/single.php', function(){
     fillPage(dataLink); // load datas from json
});

一切正常，我可以使用数据正确加载页面，但现在我必须实现后退按钮的行为（使用 history api / popstate ）但我不知道该怎么做因为每个会员页面都充满了来自 json.

的数据

$(window).bind('popstate', function() {
 // what inside here? It should call the previous page + the data from json like the previous ajax call
});

有什么想法吗？

编辑：你可以看到我真正调用的唯一页面是 single.php 每次都充满新数据。也许是这里的问题？

编辑 2 和想法：也许我可以存储当前和上一页 2 变量，并在调用事件 popstate 运行 fillpage() 时使用前一个变量（简单地说是前一个名称）并添加检查上一页是否为主页，在这种情况下加载 home.php 这是个坏主意吗？

已解决：

我创建了一个自定义属性 backlink 来存储我所在页面的名称

$(".ajax-container").load('/home.php', function(data){
                    history.pushState({url: 'home.php', backLink: dataLink}, null, "/" );

然后我检查 popstate

if (state.backLink != "home"){
                $(".ajax-container").load('thesinglepage.php', function(){
                    ...
            }else{
                $(".ajax-container").load('/home.php', function(){
                    ...
                });
            }

Answer 1

您有两个选择：

1) 当你调用pushstate时，你可以在第一个参数上存储一个对象数据。在此对象中，您可以存储表示页面的键（例如您想要的："mypage.php"，其中 "mypage" 是动态页面）。

然后，当您回顾历史时，您可以像这样访问 "event.state"：

history.pushState({url: dataLink + '.php'}, null, "/members/" + dataLink + ".php" );
    window.popstate = function(e) { 
        e.preventDefault(); 
        console.log(e.state); // here we have previous object data store on pushstate url
        /* Here, call again $('.ajax-container').load(function() { fillpage(state.fillpage); }) */
    }

2) 在 ajax 调用传递负载 url + 数据后保存 pushsate。这样做，您可以在不执行 ajax 调用的情况下调用 fillpage：

$(".ajax-container").load('/members/single.php', function(data){
    history.pushState({url: dataLink + '.php', dataLink: data}, null, "/members/" + dataLink + ".php" );
    fillPage(dataLink); // load datas from json
});

window.popstate = function(e) { 
    e.preventDefault(); 
    console.log(e.state); // here we have previous object data store after ajax event
    /* Here, call directy fillpage(state.fillpageData); */
}

已更新 我创建了一个真实示例（至少可以在我的计算机上正常运行）来向您展示推送和弹出状态功能。在这个例子中，我使用 jsonp 进行了调用（但这对这种情况并不重要）。如果您有疑问，请不要犹豫，问 :) http://pastebin.com/98iN9UDf

历史 API - Ajax 页 + Json

History API - Ajax pages + Json

javascript

ajax

jquery

history

json

已解决：