576
правок
Изменения
Перейти к навигации
Перейти к поиску
Новая страница: «<div style="width: 800px;"> Данная статья ставит своей целью описать основные принципы загрузки кон…»
<div style="width: 800px;">
Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через AJAX.
Для удобства загрузки контентных страниц можно использовать AJAX, он используется для взаимодействия с сервером без перезагрузки страницы, таким образом пользователю не придется лишний раз ожидать перезагрузки страницы в браузере.
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы:
<ul>
<li>страница на который мы хотим выводить новости /news.html</li>
<li>страница на которой находятся новости авиакомпаний /avia-news.html</li>
<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>
На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
<ul>
<li class="js-news" data="visa">Новости виз</li>
<li class="js-news" data="service">Новости сервиса</li>
</ul>
<div class="results">
Вводное описание для страницы новостей.
</div>
</syntaxhighlight>
А в разделе '''«Администрирование» ⇨ «Настройка внешнего вида»''' необходимо разместить js-код:
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
$(".js-news").on("click", function() {
var data = $(this).attr("data");
$.ajax({
url: '/' + data + '-news.html',
success: function(data) {
$('.results').html(data);
}
});
});
</syntaxhighlight>
В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.
</div>
Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через AJAX.
Для удобства загрузки контентных страниц можно использовать AJAX, он используется для взаимодействия с сервером без перезагрузки страницы, таким образом пользователю не придется лишний раз ожидать перезагрузки страницы в браузере.
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы:
<ul>
<li>страница на который мы хотим выводить новости /news.html</li>
<li>страница на которой находятся новости авиакомпаний /avia-news.html</li>
<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>
На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
<ul>
<li class="js-news" data="visa">Новости виз</li>
<li class="js-news" data="service">Новости сервиса</li>
</ul>
<div class="results">
Вводное описание для страницы новостей.
</div>
</syntaxhighlight>
А в разделе '''«Администрирование» ⇨ «Настройка внешнего вида»''' необходимо разместить js-код:
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
$(".js-news").on("click", function() {
var data = $(this).attr("data");
$.ajax({
url: '/' + data + '-news.html',
success: function(data) {
$('.results').html(data);
}
});
});
</syntaxhighlight>
В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.
</div>
