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

Материал из Центр поддержки системы бронировании
Версия от 13:53, 24 февраля 2015; Алексей Петрик (обсуждение | вклад) (Новая страница: «<div style="width: 800px;"> Данная статья ставит своей целью описать основные принципы загрузки кон…»)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к навигации Перейти к поиску

Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через 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 подгружается нужная страница.