Измените URL в адресной строке с помощью jQuery

Question

Я написал следующее для выполнения запросов AJAX в моем приложении:

$ (document) .ready (function () {

    $('ul#ui-ajax-tabs li:first').addClass('selected');

    $('#ui-ajax-tabs li a').click(function (e) {

        e.preventDefault();

        $("#ui-ajax-tabs li").removeClass("selected");

        $(this).parents('li').addClass("loading");

        var url = $(this).attr("href");
        var link = $(this);
        console.log(url);

        $.ajax({
            url: url,
            success: function (responseHtml) {
                $('div#ui-tab-content').html($(responseHtml).find('div#ui-tab-content > div#ui-ajax-html'));
                $(link).parents('li').addClass('selected');
                $("#ui-ajax-tabs li").removeClass("loading");
            },
            error: function () {
                $('div#ui-tab-content').html('<div class="message error">Sorry that page doesn\'t exist</div>');
                $(link).parents('li').addClass('selected');
                $("#ui-ajax-tabs li").removeClass("loading");
            }
        });

    });

});

Однако я также хочу изменить URL-адресв адресной строке, чтобы соответствовать тому, что я только что загрузил. Я просмотрел некоторые демонстрации, используя новый API истории HTML5 @ http://html5demos.com/history, но это не имеет никакого смысла.

Может кто-то показать примеро том, как я мог бы использовать новые материалы истории в моем коде? Был бы очень признателен. Спасибо.

Спасибо

Answer 1

Единственный способ изменить URL (без хэшей) и остаться на той же странице - использовать HTML5.И вам лучше использовать плагин, чем писать свой собственный.

В вашем случае вам нужно будет «выдвигать» новое состояние истории при каждом вызове страницы Ajax.

Может быть, выможете взглянуть на этот плагин History.js: https://github.com/browserstate/History.js/

Его использование очень просто, как вы можете видеть в Документах.

(function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);