Использование AJAX для подгрузки контентных страниц (CMS): различия между версиями
Перейти к навигации
Перейти к поиску
| Строка 5: | Строка 5: | ||
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: | Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: | ||
| − | + | * страница на который мы хотим выводить новости <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;">/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> | |
| − | |||
| − | |||
| − | < | + | {{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 подгружается нужная страница.
