JavaScript — как сохранить результаты запросов AJAX между страницами
Исходная информация
У меня есть веб-приложение, которое включает в себя страницу поиска. Этот поиск предоставляет 3 разных выпадающих списка, которые заполняются через ajax.
При первой загрузке страницы поле 1 заполняется списком местоположений по умолчанию.
Когда пользователь выбирает местоположение, второй выпадающий список появляется на той же странице и заполняется через ajax со зданиями в пределах выбранного местоположения.
Как только здание выбрано, появится последний выпадающий список со списком комнат.
Как только пользователь выбирает комнату, на странице отображаются сведения о комнате, и пользователь может перейти к одному из свойств комнаты, что приведет к переходу на новую страницу.
описание проблемы
Когда пользователи завершили просмотр веб-страницы с описанием комнаты и нажали кнопку «назад», я хотел бы иметь возможность показать им, где они остановились в последний раз … это страница поиска со всеми их предыдущими выборами, которые привели их к детали комнаты. В настоящее время, когда они нажимают кнопку «Назад», страница поиска по умолчанию загружается, и их предыдущие выборы исчезают.
Каков наилучший способ сохранить детали своего поискового запроса?
Я думал о добавлении значений в URL … как строка запроса. Прямо сейчас, URL, конечно, не меняется, потому что все делается через ajax / javascript для страницы поиска.
Но помимо этого варианта мне было интересно, есть ли другая идея / способ сделать то же самое.
Решение должно работать во всех браузерах, включая IE, Chrome, FFox, Safari.
Код
Ajax-код, который срабатывает, когда они меняют значения в выпадающих списках:
$('#Locations').live('change',function(){
$.ajax({
url:"<?php echo site_url('mycontroller/getbuildings/');?>" + "/" + $selectedvalue,
type:'GET',
dataType:'json',
success: function(returnDataFromController) {
logic to populate building drop down
}$('#buiding_Locations').live('change',function(){
$('#room_locations').html('');
$('#search').hide();
var htmlstring;
$selectedvaluebranch_ = $('#Locations').val();
$selectedvaluebuiding_ = $('#buiding_Locations').val();
$.ajax({
url:"<?php echo site_url('mycontroller/getrooms');?>" + "/" + $selectedvaluebuiding_,
type:'GET',
dataType:'json',
success: function(returnDataFromController) {
logic to populate room list
}
В методе, который заполняет раскрывающийся список Locations (mycontroller / getLocations), я добавил логику для использования / проверки переменных сеанса … и теперь, когда я нажимаю кнопку «Назад», выбор местоположения сохраняется. Метод «mycontroller / getLcations» является методом по умолчанию, который вызывается при загрузке страницы поиска.
Но я задаюсь вопросом о том, как лучше всего заполнить другие два выпадающих списка. Как видите, они заполняются только тогда, когда пользователь меняет значения «родительского» выпадающего списка.
Возможно, мне нужно создать другой метод в моем контроллере, который выполняет запрос для всех 3 блоков … и отправляет все эти данные во внешний интерфейс вместо способа, которым я делаю это сейчас … с 3 отдельными вызовами для 3 отдельных методов ,
И затем мне нужно будет переместить логику, которая заполняет отдельные выпадающие списки, из того места, где они сейчас находятся, к повторно используемой функции, которую можно вызывать, когда пользователь делает новый выбор, или когда я пытаюсь использовать данные поиска в переменных сеанса.
Если есть более простой способ сделать это, пожалуйста, дайте мне знать. Я просто пытаюсь убедиться, что я не пишу лишний код / что я правильно рефакторинг.
Решение
При каждом вызове AJAX для загрузки нового раскрывающегося списка можно сохранить переменную сеанса, указывающую состояние раскрывающихся списков. Затем просто загрузите эти результаты, чтобы отобразить контент, который вы выбрали ранее.
Редактировать:
То, что вы делаете, кажется вполне нормальным. Несколько предложений, чтобы сделать это лучше:
- Вы можете избавиться от тегов PHP в вашем jQuery, создав переменную javascript (как
var mainURL = <?=site_url() ?>;, Это позволит затем поместить ваши функции в файл, который можно кэшировать, следовательно, вы получите лучшее разделение между JS / PHP. - Для большей гибкости, как насчет использования POST вместо GET? Это может позволить добавить переменную, говорящую о том, какая форма выбирается, и в возвращаемых данных добавить переменную, чтобы указать поле для заполнения: Следовательно, вам потребуется только одна
$.ajaxпример.
Например, что-то вроде:
function updateForms(type,value){
$.ajax({
url:mainURL+"/mycontroller/getdata",
type:"POST",
data:{
dropdownSelected:type,
value:value
},
success:function(returnData){
populate(returnData.form);
});
Другие решения
Вероятно, лучший способ — использовать переменные сеанса php для хранения последних значений, которые пользователь искал.
проверять, выписываться http://www.sitepoint.com/php-sessions/ хороший пример того, как они используются.
РЕДАКТИРОВАТЬ
Если одна вещь полагается на другую, которая полагается на другую, и у вас есть наименьшая единица измерения, то вы можете выполнить обратный код для резервного копирования. Например, у вас есть местоположение, сохраненное как переменная сеанса, и это местоположение можно увидеть только в раскрывающемся списке, если выбран X, а X можно увидеть только в этом раскрывающемся списке, если Y выбрано в другом раскрывающемся списке … и т. Д. И т. П. у вас уже есть отношения родитель-ребенок, и если это так, то это должно быть легко задом наперед.