Ajax 后退按钮功能

Question

我不知道如何使用 historyAPI 或 history.js 请帮忙！我的代码是这样的...

我想要的是显示一组按钮，用户单击其中一个按钮，然后显示另一组按钮，ajax 在第一组按钮之间进行调用，使用 [=19= 隐藏]...

$(".button1").click(function(){
    $('#div2').css("display","none");
    $('#div1').css("display","none");
    val1 = $(this).attr("value");
    query = 'phone.php?val1='+val1;
    myQuery();
    $('#div2').css("display","block");
});

$(".button2").click(function(){
    val2= $(this).attr("value");
    $("#div2").css("display","none");
    query = 'phone.php?val1='+val1+'&val2='+val2;
    myQuery();
   $("#div3").css("display","block");
});

function myQuery() {
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        document.getElementById("sql").innerHTML = xmlHttp.responseText;
    }
}

xmlHttp.open('GET', query, true);
xmlHttp.send();
}

当我按下后退按钮时，它会转到以前的网站...所以我当然希望它显示第一组按钮并显示更新前的内容。

Answer 1

当使用Ajax时，您不会在浏览器历史记录中放置任何内容，这就是为什么当您按下后退按钮时，您会返回到上一个记录的页面。如果您希望记录您的 Ajax 调用，就像您要转到一个新页面一样，您需要在历史堆栈上推送一个新状态。

if ( typeof(window.history.pushState) == 'function' ) {
    var stateObj ={
        title: title,
        url: query,
    } ;
    window.history.pushState (stateObj, title, query) ;     
}

您还需要实现一个 onpopstate 事件函数 hide/show 您的按钮基于用户返回历史记录后变为活动状态。

window.onpopstate =function (event) {
    alert ("location: " + document.location + ", state: " + JSON.stringify (event.state)) ;
    // based on the event.state values, restore buttons visibility here...

} ;

Ajax 后退按钮功能

Ajax back button functionality

javascript

php

jquery

ajax

history.js