HTML 5 - Ajax popstate и pushstate - PullRequest
Новая
       23

HTML 5 - Ajax popstate и pushstate

1 голос
/ 18 марта 2012

Я пытаюсь понять, как использовать это pushstate и popstate для моих приложений ajax. Я знаю, что есть некоторые плагины, но сейчас я пытаюсь научиться использовать их в необработанном виде. Я также знаю, что в необработанном виде он не поддерживается IE. Все это в стороне, мне нужна помощь, чтобы понять, как его использовать.

часть pushstate довольно проста. Прямо сейчас у меня есть: 

function loadForm(var1,var2){ 
    string = "xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

Это очень хорошо меняет мой URL и добавляет его в мой стек URL. У меня есть другая функция, которая выглядит следующим образом: 

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

Вторая функция также изменяет URL при вызове. Теперь, когда у меня есть эта часть, я пытаюсь понять, как использовать popstate. Прямо сейчас у меня это выглядит следующим образом 

window.popState = ajax;

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: string,
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

Так что, если вы можете отобразить мою страницу с двумя ссылками, одна вызывает функцию loadForm, а другая ссылка вызывает функцию loadForm2. Когда я нажимаю на каждую из ссылок, формы загружаются через AJAX просто отлично, и URL-адрес меняется, как и должно. Когда я нажму кнопку «Назад», URL будет возвращен к URL предыдущей страницы, НО содержимое страницы снова загружает текущую форму вместо предыдущей. Когда я нажимаю кнопку «Назад», он делает ajax-вызов (firebug), как будто он пытается загрузить предыдущую форму, но вместо выполнения предыдущего ajax-вызова он выполняет текущий ajax-вызов. Таким образом, мой URL-адрес возвращается к предыдущему URL-адресу, но загруженная форма или вызываемый вызов ajax совпадают с самой последней загрузкой страницы (не с загрузкой предыдущей страницы).

Я не уверен, что я делаю неправильно, и любая помощь будет принята с благодарностью.

1 Ответ

8 голосов
/ 18 марта 2012

Вы делаете что-то странное. 

window.popState = ajax;

Я даже удивлен, что ajax() даже называют.

Обычный способ сделать это - зарегистрировать обработчик событий. 

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
}

См. Как вызвать изменения при использовании кнопки "Назад" с history.pushstate и popstate?

EDIT:

В основном вам нужно знать, какую форму загружать при изменении вашего состояния. .originalEvent.state будет содержать эту информацию, которую вы можете затем передать вашему вызову ajax. Он также должен содержать соответствующий string.

Проблема в вашем подходе заключается в том, что string всегда оставался одним из последних недавно загруженных страниц. Вам нужно прочитать эту строку в event.orginalEvent.state. используйте console.log(), чтобы найти его в этом объекте.

РЕДАКТИРОВАТЬ 2:

Можете ли вы дать мне пример того, как должен выглядеть мой код? Я думаю, вы понимаете, чего я пытаюсь достичь.

Каждый раз, когда нажимается кнопка «Назад» (или кнопка «Вперед») браузера, вам необходимо загрузить страницу из AJAX.

Вы попытались сделать это, сказав: 

window.popState = ajax;

Это опасно, так как вы заменяете системную функцию.

Вместо этого вы должны зарегистрировать обработчик событий для изменения состояния. 

jQuery(window).bind('popstate', ajax);

Теперь каждый раз, когда нажимается кнопка «назад», ваша ajax() функция (должна) вызываться.

Пока это только улучшит ваш подход к нему, но не решит вашу проблему.

Проблема в том, что ваша исходная функция ajax() ссылается на глобальную переменную с именем string. Эта глобальная переменная не имеет памяти о предыдущих состояниях. Поэтому каждый раз оригинальная форма загружается снова и снова.

Но вы уже правильно храните string в состоянии, выполнив: 

history.pushState("", "page 1", string);

Поэтому, когда вызывается ajax, браузер передает ему объект события, который содержит всю эту информацию.

Итак, все, что вам нужно сделать сейчас, это изменить ajax() следующим образом: 

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

Наконец, вам также следует прекратить использование string в качестве глобальной переменной с помощью ключевого слова var и убедиться, что строка содержит «?»: 

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

Это уменьшит любую путаницу в будущем с тем, что что-то почти работает, но не работает должным образом.

...