Как изменить URL после запроса ajax?

Question

У меня есть меню с некоторыми ссылками, которые обновляют div content и выполняют функцию onSuccess после его загрузки.

<li>@Ajax.ActionLink("Home", "Index", "home")</li>
<li>@Ajax.ActionLink("Download", "Index", "download")</li>

Если я нахожусь на URL /home и нажимаюссылка для скачивания div успешно меняется.Проблема в том, что URL-адрес не изменился.

Как я могу получить запрошенный URL-адрес, чтобы я мог позвонить history.pushState при успешных запросах?

Answer 1

С этот вопрос (Как получить URL запроса в запросе jQuery $ .get / ajax) Я обнаружил, что могу получить его с помощью this.url.

Из MDC window.history Я нашел синтаксис и из MDC Управление историей браузера Я обнаружил, что могу получить текущее состояние с помощью history.state (похоже, работать на Chrome, хотя) и обнаружил, что при вызове pushState я могу отправить только 640 тыс. символов на stateObject, иначе он вызывает исключение.

Мой текущий метод для успешных запросов ajax:

OnSuccess: function(html, status, xhr){
    var requestedUrl = this.url.replace(/[&?]X-Requested-With=XMLHttpRequest/i, "");

    // if the url is the same, replace the state
    if (window.location.href == requestedUrl)
    {
        history.replaceState({html:html}, document.title, requestedUrl);
    }
    else
    {
        history.pushState({html:html}, document.title, requestedUrl);
    }
},

Для базового теста я сохраняю весь результат на stateObject, если он выдает исключение, я вместо этого установлю URL, чтобы иметь возможность сделать новый запрос.

Мое popstate событие

$(window).bind("popstate", function (e) {
    var state = e.originalEvent.state;
    $("#body").html(state.html);
});

Он восстанавливает страницу, как это было раньше, мне не нужно делать новый запрос.

Answer 2

Единственный способ добиться этого - использовать jQuery для обработки события щелчка по ссылкам. Таким образом, вы можете добавить атрибут класса к своим ссылкам следующим образом:

@Ajax.ActionLink("Home", "Index", "home", new { @class = "menuLinks" })

Добавление события клика;

$(".menuLinks").click(function() {
   history.pushState(stateObj, $(this).html, $(this).attr("href"));
}

Не очень знаком с подписью pushState, но я полагаю, что использование href тега 'a' будет работать как действительный URL для передачи в pushState.