Использование AJAX для подгрузки контентных страниц (CMS)

Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через AJAX.

Для удобства загрузки контентных страниц можно использовать AJAX, он используется для взаимодействия с сервером без перезагрузки страницы, таким образом пользователю не придется лишний раз ожидать перезагрузки страницы в браузере.

Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы:

• страница на который мы хотим выводить новости /news.html
• страница на которой находятся новости авиакомпаний /avia-news.html
• страница с новостями сервиса /service-news.html

! Для страниц /avia-news.html и /service-news.html необходимо использовать макеты без шапки и подвала.

На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:

1 <ul>
2    <li class="js-news" data="visa">Новости виз</li>
3    <li class="js-news" data="service">Новости сервиса</li>
4 </ul>
5 <div class="results">
6    Вводное описание для страницы новостей.
7 </div>

А в разделе «Администрирование» ⇨ «Настройка внешнего вида» необходимо разместить js-код:

1 $(".js-news").on("click", function() {
2    var data = $(this).attr("data");
3    $.ajax({
4       url: '/' + data + '-news.html',
5       success: function(data) {
6          $('.results').html(data);
7       }
8    });
9 });

В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.