Почему адресная строка браузера не меняется при использовании AJAX?

Question

Я использую комбинацию AJAX / JSON в Zend Framework.Всякий раз, когда я нажимаю на любую ссылку в моем приложении, вызывается AJAX-запрос, и содержимое успешно загружается в DIV, но адресная строка не изменяется.Как изменить адресную строку в соответствии с текущим активным действием.

Вот мой рабочий код:

Когда я использую http://practice.dev/ загружается мой файл index.phtml .

<a href='http://practice.dev/index/one' class='ajax'>One</a>
<a href='http://practice.dev/index/two' class='ajax'>Two</a>

<div id="content">content comes here</div>

one.phtml :

$jsonArray = array( 'content' => 'One' );
echo Zend_Json::encode( $jsonArray );

two.phtml :

$jsonArray = array( 'content' => 'Two' );
echo Zend_Json::encode( $jsonArray );

Код JS

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

Когда я нажимаю ссылку один, появляется строка «Один»загружен в контент DIV, но адресная строка по-прежнему http://practice.dev/.Это должно быть http://practice.dev/index/one

Когда я щелкаю ссылку два, тогда строка содержимого Two загружается в контент DIV, но адресная строка по-прежнему http://practice.dev/.Это должно быть http://practice.dev/index/two

Как это возможно?

Спасибо

Answer 1

Удалить event.preventDefault();, это останавливает поведение по умолчанию для возникающей ссылки. Поведение по умолчанию - переход к URL-адресу в атрибуте href.

Редактировать на основе дополнительной информации от OP

Вам нужно, чтобы ваш javascript отвечал на хеш-тег.

Вместо того, чтобы иметь URL-схему, подобную этой http://practice.dev/index/one, ему также необходимо иметь версию хеш-тега, которую javascript может обрабатывать так http://practice.dev/index#one. Это означает, что если кто-то заходит на страницу http://practice.dev/index#two, ваш javascript может знать, что ему нужно перейти и получить вторую страницу, даже если Zend уже получит первую страницу.

В вашем javascript вы можете получить хеш-тег, используя

var hash = location.hash;

И установите его, используя

location.hash = "two";

Подробнее об этом здесь

Поэтому оставьте свои ссылки такими же, как этот http://practice.dev/index/one, но добавьте хеш-тег к URL-адресу, когда пользователь щелкает ссылку, вы МОЖЕТЕ добавить хеш-теги в адресную строку. Измените свой javascript для загрузки определенного номера страницы, если при загрузке страницы присутствует хэш-тег.

Answer 2

Это:

event.preventDefault();

- это то, что мешает обновлению адресной строки.

Я не верю, что есть способ изменить сам URL (document.location.href) безвызывая перенаправление браузера.Даже изменение фрагмента (document.location.hash) вызовет «прокрутку» (в зависимости от того, достаточно ли маленькое окно браузера для прокрутки).

РЕДАКТИРОВАТЬ: Ну, это будетвызывать прокрутку до соответствующего якоря, только если такой якорь существует на вашей странице, как отмечает Пекка.Поэтому я думаю, вы можете попробовать это.

Если вы хотите, чтобы Google индексировала вашу страницу, несмотря на Ajax и модифицированные Ajax URL, начинайте свои фрагменты с !, чтобы позволить Googleсканировать ваши Ajax-страницы.