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

Материал из Центр поддержки системы бронировании
Перейти к навигации Перейти к поиску
(Новая страница: «<div style="width: 800px;"> Данная статья ставит своей целью описать основные принципы загрузки кон…»)
 
 
(не показана 1 промежуточная версия 1 участника)
Строка 5: Строка 5:
  
 
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы:  
 
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы:  
−
<ul>
+
* страница на который мы хотим выводить новости <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/news.html</syntaxhighlight>
−
<li>страница на который мы хотим выводить новости /news.html</li>  
+
* страница на которой находятся новости авиакомпаний <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/avia-news.html</syntaxhighlight>
−
<li>страница на которой находятся новости авиакомпаний /avia-news.html</li>  
+
* страница с новостями сервиса <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/service-news.html</syntaxhighlight>
−
<li>страница с новостями сервиса /service-news.html</li>
 
−
</ul>
 
  
−
<span style="background-color:#fff0f5;"><span style="font-size:large;"><span style="color:#ff0000;">!</span></span> Для страниц /avia-news.html и /service-news.html необходимо использовать макеты без шапки и подвала.</span>
+
{{Attention|Для страниц <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/avia-news.html</syntaxhighlight> и <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/service-news.html</syntaxhighlight> необходимо использовать макеты без шапки и подвала.}}
  
−
На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:
+
На странице <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/news.html</syntaxhighlight> выводим список новостей (например списком <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">ul</syntaxhighlight>) и блок в который будут выводится новости:
  
 
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
 
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
Строка 39: Строка 37:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.
+
В атрибуте <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">data</syntaxhighlight> хранится префикс названия страницы и по клику на новость в блок <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">results</syntaxhighlight> подгружается нужная страница.
 
</div>
 
</div>
 +
 +
== См. также ==
 +
* [[Система управления порталом (ЦМС)]]
 +
* [[Фронт-энд]]
 +
* [[Веб-сайт]]
 +
* [[Редактор структуры]]
 +
* [[Алиас]]
 +
* [[Короткие ссылки]]
 +
* [[Файловый_менеджер_(ЦМС)|Файловый менеджер]]

Текущая версия на 14:13, 6 марта 2019

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

См. также

Источник — https://support.nemo.travel/index.php?title=Использование_AJAX_для_подгрузки_контентных_страниц_(CMS)&oldid=15818