https://support.nemo.travel/index.php?action=history&feed=atom&title=%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_AJAX_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_%28CMS%29
Использование AJAX для подгрузки контентных страниц (CMS) - История изменений
2026-06-02T09:05:02Z
История изменений этой страницы в вики
MediaWiki 1.32.0
https://support.nemo.travel/index.php?title=%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_AJAX_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_(CMS)&diff=15818&oldid=prev
Татьяна Машковцева в 11:13, 6 марта 2019
2019-03-06T11:13:53Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 11:13, 6 марта 2019</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >Строка 5:</td>
<td colspan="2" class="diff-lineno">Строка 5:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><ul></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>страница на который мы хотим выводить новости <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>/news.html</<ins class="diffchange diffchange-inline">syntaxhighlight</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><li></del>страница на который мы хотим выводить новости /news.html</<del class="diffchange diffchange-inline">li</del>> </div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>страница на которой находятся новости авиакомпаний <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>/avia-news.html</<ins class="diffchange diffchange-inline">syntaxhighlight</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><li></del>страница на которой находятся новости авиакомпаний /avia-news.html</<del class="diffchange diffchange-inline">li</del>> </div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>страница с новостями сервиса <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>/service-news.html</<ins class="diffchange diffchange-inline">syntaxhighlight</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><li></del>страница с новостями сервиса /service-news.html</<del class="diffchange diffchange-inline">li></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"></ul</del>></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del class="diffchange diffchange-inline">span </del>style="background<del class="diffchange diffchange-inline">-color</del>:#<del class="diffchange diffchange-inline">fff0f5</del>;"><<del class="diffchange diffchange-inline">span </del>style="font-size:<del class="diffchange diffchange-inline">large</del>;<del class="diffchange diffchange-inline">"><span style="color</del>:#<del class="diffchange diffchange-inline">ff0000</del>;"><del class="diffchange diffchange-inline">!<</del>/<del class="diffchange diffchange-inline">span></span> Для страниц /avia</del>-news.html <del class="diffchange diffchange-inline">и </del>/<del class="diffchange diffchange-inline">service-news.html </del>необходимо использовать макеты без шапки и подвала.<del class="diffchange diffchange-inline"></span></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">{{Attention|Для страниц </ins><<ins class="diffchange diffchange-inline">syntaxhighlight lang="text" enclose="none" </ins>style="<ins class="diffchange diffchange-inline">font-size: 1.2em; padding: 0 3px; </ins>background: #<ins class="diffchange diffchange-inline">F0F0F0; border: 1px dashed #2F6FAB</ins>;"><ins class="diffchange diffchange-inline">/avia-news.html</ins><<ins class="diffchange diffchange-inline">/syntaxhighlight> и <syntaxhighlight lang="text" enclose="none" </ins>style="font-size: <ins class="diffchange diffchange-inline">1.2em</ins>; <ins class="diffchange diffchange-inline">padding: 0 3px; background: #F0F0F0; border</ins>: <ins class="diffchange diffchange-inline">1px dashed </ins>#<ins class="diffchange diffchange-inline">2F6FAB</ins>;">/<ins class="diffchange diffchange-inline">service</ins>-news.html<ins class="diffchange diffchange-inline"><</ins>/<ins class="diffchange diffchange-inline">syntaxhighlight> </ins>необходимо использовать макеты без шапки и подвала.<ins class="diffchange diffchange-inline">}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>На странице <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>/news.html<ins class="diffchange diffchange-inline"></syntaxhighlight> </ins>выводим список новостей (например списком <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>ul<ins class="diffchange diffchange-inline"></syntaxhighlight></ins>) и блок в который будут выводится новости:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l39" >Строка 39:</td>
<td colspan="2" class="diff-lineno">Строка 37:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>В атрибуте <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>data<ins class="diffchange diffchange-inline"></syntaxhighlight> </ins>хранится префикс названия страницы и по клику на новость в блок <ins class="diffchange diffchange-inline"><syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;"></ins>results<ins class="diffchange diffchange-inline"></syntaxhighlight> </ins>подгружается нужная страница.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== См. также ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== См. также ==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Система управления порталом (ЦМС)]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Система управления порталом (ЦМС)]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Фронт-энд]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Фронт-энд]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Веб-сайт]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Веб-сайт]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Редактор структуры]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Редактор структуры]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Алиас]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Алиас]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Короткие ссылки]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Короткие ссылки]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Файловый_менеджер_(ЦМС)|Файловый менеджер]]<del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* </ins>[[Файловый_менеджер_(ЦМС)|Файловый менеджер]]</div></td></tr>
</table>
Татьяна Машковцева
https://support.nemo.travel/index.php?title=%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_AJAX_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_(CMS)&diff=6720&oldid=prev
Алексей Петрик в 11:02, 24 февраля 2015
2015-02-24T11:02:22Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 11:02, 24 февраля 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l41" >Строка 41:</td>
<td colspan="2" class="diff-lineno">Строка 41:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== См. также ==</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Система управления порталом (ЦМС)]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Фронт-энд]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Веб-сайт]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Редактор структуры]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Алиас]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Короткие ссылки]]<br></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Файловый_менеджер_(ЦМС)|Файловый менеджер]]<br></ins></div></td></tr>
</table>
Алексей Петрик
https://support.nemo.travel/index.php?title=%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_AJAX_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_(CMS)&diff=6719&oldid=prev
Алексей Петрик: Новая страница: «<div style="width: 800px;"> Данная статья ставит своей целью описать основные принципы загрузки кон…»
2015-02-24T10:53:40Z
<p>Новая страница: «<div style="width: 800px;"> Данная статья ставит своей целью описать основные принципы загрузки кон…»</p>
<p><b>Новая страница</b></p><div><div style="width: 800px;"><br />
Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через AJAX.<br />
<br />
Для удобства загрузки контентных страниц можно использовать AJAX, он используется для взаимодействия с сервером без перезагрузки страницы, таким образом пользователю не придется лишний раз ожидать перезагрузки страницы в браузере. <br />
<br />
Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: <br />
<ul><br />
<li>страница на который мы хотим выводить новости /news.html</li> <br />
<li>страница на которой находятся новости авиакомпаний /avia-news.html</li> <br />
<li>страница с новостями сервиса /service-news.html</li><br />
</ul><br />
<br />
<span style="background-color:#fff0f5;"><span style="font-size:large;"><span style="color:#ff0000;">!</span></span> Для страниц /avia-news.html и /service-news.html необходимо использовать макеты без шапки и подвала.</span><br />
<br />
На странице /news.html выводим список новостей (например списком ul) и блок в который будут выводится новости:<br />
<br />
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;"><br />
<ul><br />
<li class="js-news" data="visa">Новости виз</li><br />
<li class="js-news" data="service">Новости сервиса</li><br />
</ul><br />
<div class="results"><br />
Вводное описание для страницы новостей.<br />
</div><br />
</syntaxhighlight><br />
<br />
А в разделе '''«Администрирование» ⇨ «Настройка внешнего вида»''' необходимо разместить js-код:<br />
<br />
<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;"><br />
$(".js-news").on("click", function() {<br />
var data = $(this).attr("data");<br />
$.ajax({<br />
url: '/' + data + '-news.html',<br />
success: function(data) {<br />
$('.results').html(data);<br />
}<br />
});<br />
});<br />
</syntaxhighlight><br />
<br />
В атрибуте data хранится префикс названия страницы и по клику на новость в блок results подгружается нужная страница.<br />
</div></div>
Алексей Петрик