Ajax назад функциональность кнопки

Я не могу понять, как я могу использовать historyAPi или history.js пожалуйста помогите! Мой код таков…

То, что я хочу, это набор кнопок отображаются пользователь нажимает одну из них, то другой набор кнопок отображаются и ajax вызов производится между первым набором скрыта с помощью css…

$(".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();
}

Когда я нажимаю кнопку назад, он переходит на предыдущий веб-сайт … поэтому, конечно, я хочу, чтобы он отображал первый набор кнопок и показывал контент, который был там до обновления.

1 ответ

  1. При использовании Ajax, вы ничего не помещаете в историю браузера, поэтому при нажатии кнопки назад, вы возвращаетесь на предыдущую записанную страницу.
    Если вы хотите, чтобы ваши вызовы Ajax были записаны, как если бы вы собирались на новую страницу, вам нужно нажать новое состояние в стеке истории.

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

    Вы также должны иметь функцию события onpopstate, реализованную, чтобы скрыть/показать ваши кнопки на основе состояния, становящегося активным после того, как пользователь вернется в историю.

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