LINUX.ORG.RU
решено Форум — Web-development  

Загрузка контента по ajax без php при смене url

 ,


0

2

Доброе время суток. Дали ТЗ сделать загрузку контента без обновления страницы. До этого момента всё нормально - контент грузится, url меняется с помощью history.pushState().

Но! кроме того, нужно ещё чтобы если юзер менял url, подгружалась именно та страница вместе со всем статическим содержимым. А она естественно грузится голая.

Сложность в том, что нужно всё это сделать без пехепе (с ним всё норм). Это вообще возможно? Насколько я понимаю, так работают одностраничники на AngularJS.

Ниже часть скрипта, отвечающая за это, которой, конечно же не достаточно. Есть ли мысли по этому поводу?

    var cont = $('#content');
    $('.blocks').click(function() {
        var url = $(this).attr('data-href');
        $.ajax({
            url:     url + '?ajax=1',
            success: function(data){
                $(cont).html(data);
            }
        });
        if(url != window.location){
            window.history.pushState(null, null, url);
        }
        if (cont.visible == true) {
          hideContent(this);
        } else {
          showContent(this);
        }
    });

    $(window).bind('popstate', function() {
    $.ajax({
        url:     location.pathname + '?ajax=1',
        success: function(data) {$(cont).html(data);}
        });});


Последнее исправление: morisRavel (всего исправлений: 1)
← Убрать элементы интерфейса текущего окна
Perl Dancer структура приложения →

без пехепе

какая разница, похапе пистон или что-то еще? Ты отправляешь запрос на сервер, сервер отдает тебе контент. Ты чо, хочешь загрузить контент, которого не существует в природе, или чо?

nuboquest
()
Ответ на: комментарий от nuboquest

Ты не понял вопрос. Весь контент грузится нормально (без пистона тоже) при переходе по ссылке или клике по соответствующим блокам. И при загрузке меняется url. Например, вместо index.html на block1.html

Если же никуда не кликая, перейти напрямую по url, т.е. site/block1.html , то грузится, естественно только то, что в этом файле (чистый текст) без всего статического обвеса, как если бы это было при клике с главной страницы.

Вопрос в том, возможно ли такое, что если юзер набрал точный url, то вывод ему был такой же, как если бы он кликнул на главной странице cоответствующую ссылку.

На PHP это делается приведением подгружаемых фалов к виду: 

// block1.php

$content = 'Подгружаемый текст';
if (isset($_GET['ajax'])) {
    echo $content;
} else {
    include_once 'index.php';
}

Всего-то! Но нужно на JS.

morisRavel
() автор топика

Грузи в респонз для аякса не огрызок хтмеля, а ВСЮ страницу, как будто это обычный запрос, но в контент всовывай только нужный огрызок.

deep-purple ★★★★★
()

Переделай rewrite правило, чтобы оно смотрело на главный файл, а путь передавало аргументом. А потом по аргументу яваскриптом подгружай данные.

Tark ★★
()
Ответ на: комментарий от Tark

Переделай rewrite правило, чтобы оно смотрело на главный файл, а путь передавало аргументом. А потом по аргументу яваскриптом подгружай данные.

Это же для SEO плохо

static_lab ★★★★★
()

А в чем проблема просить ajax загружать при переходе ссылки вида /ajax/url

abs ★★★
() 
$.ajax({
            url: '/ajax/' +  url ,
            success: function(data){
                $(cont).html(data);
            }
        });
abs ★★★
()

У тебя там статика что ли? Реврайт всего, а на клиенте скриптом проверяешь текущий URL. Без JS, конечно, будет швах.

Deleted
()

Спасибо всем. Но сделал немножко подругому. в каждом подгружаемом файле перед контентом добавил строчки: 

//block1.htm
<script>
window.location = '/';
var n = location.pathname.substr(-5, 1);
sessionStorage.visibleBlock = n;
</script>
<p>сам текст </p>

А на главной странице скрипт проверяет этот sessionStorage, затем block.show(); . Получилось то что нужно.

morisRavel
() автор топика
Ответ на: комментарий от anonymous

Да, я уже сделал это. Но, что интересно, JS успевал и до этого записать значение в sessionStorage.

morisRavel
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Убрать элементы интерфейса текущего окна
Web-development
Perl Dancer структура приложения →