История браузера AJAX POST

У меня очень неприятная проблема, которую я еще не понял.

Я разрабатываю веб-систему с использованием «Парадигмы одностраничного приложения», но без какой-либо структуры, такой как angular, backbone и т. Д.

Мы загружаем страницу один раз, и почти все остальные страницы загружаются через ajax. Проблема начинается, когда пользователь нажимает кнопку «Назад» в браузере. Поскольку нет перезагрузки страницы, после входа пользователя в систему URL-адрес не изменяется, и когда пользователи пытаются использовать кнопку «Назад» в браузере, он перенаправляется на страницу входа, потому что это последняя страница, которую он «посещал».

Весь контент загружается через сообщение ajax (не очень-то горжусь), и теперь мы должны поддерживать кнопку назад / вперед. Я пробовал использовать HTML5 History API, но безуспешно. Мне удалось зарегистрировать обратный вызов popstate и снова попытаться смоделировать сообщение. Но на странице есть поля, которые я должен восстановить. Я не уверен, смогу ли я его найти, но мне нужно восстановить страницу до состояния до отправки запроса, например, снимка.

Кто-нибудь может мне помочь?

Спасибо! (Я в отчаянии: D)


javascript php html ajax browser-history
person dvtelles    schedule 03.02.2015    source источник
comment
Не изобретайте колесо заново. Взгляните на фреймворк типа angular. В противном случае рассмотрите API localStorage / history.   -  person Brad Christie    schedule 03.02.2015
comment
Что ж, я с тобой согласен. Проблема в том, что я еще не знаком с Angular, и у нас не было времени на его изучение. Проект выполнен почти на 90%, и нам нужно как можно скорее добавить эту функцию.   -  person dvtelles    schedule 03.02.2015
comment
Взгляните на пример SPA, такой как WebSushi Kendo-UI. Их код довольно прост и очень хорошо демонстрирует основы.   -  person Brad Christie    schedule 03.02.2015
comment
Это именно то, что мне нужно.   -  person dvtelles    schedule 04.02.2015

Ответы (2)


arrow_upward
3
arrow_downward

Вот простой пример того, как это сделать:

var state = null;
$(document).ready(function($) {   
//this is my menu... I created a simple menu just for testing :)
    $('nav li').on('click', function(){
        var title = $(this).text().toLowerCase();
        loadPage(title);
        window.history.pushState(title, null, '#'+title);
    });


    window.addEventListener('popstate', function(event) {
        state = event.state;
        console.log("State: "+state);
        if(state != null && state != "null"){
            loadPage(state);
        }
    });
});

function loadPage(page) {
    $("#content").load(page+".html");
}

Ваше здоровье ;)

person Thiago de Oliveira Cruz    schedule 22.04.2015

arrow_upward
0
arrow_downward

Вы можете изучить использование идентификатора фрагмента (вещи после # в URL-адресе), чтобы отслеживать, на какой «странице» вы находитесь, и это то, что делают некоторые фреймворки. Большинство браузеров могут отслеживать изменения в этом, и история браузера хорошо сочетается с этим, поэтому вы можете получить значение, когда оно изменится, и предпринять соответствующие действия.

person rburk    schedule 03.02.2015
comment
Но браузер сможет восстановить всю страницу (даже те части, которые не изменились через ajax)? - person dvtelles; 03.02.2015
comment
Да, предположим, что у вас есть URL-адреса, оканчивающиеся на # page1, # page2, # page3 и т. Д. Если вы прислушиваетесь к изменению фрагмента, которое может быть вызвано нажатием кнопки возврата, вы выбираете, на какой странице находитесь, а затем инициируете соответствующий запрос AJAX (или извлечение из кешированного объекта JS или что-то еще), а затем заполнение страницы. Это может потребовать значительных изменений в вашем приложении, но это должно работать. - person rburk; 03.02.2015