Урок 29. AJAX загрузка ресурсов

Разберёмся сегодня с AJAX загрузкой последних постов при нажатии на кнопку "Показать ещё". Создадим контейнер, куда будут записываться результаты полученного ответа от AJAX запроса.

<div id="result"></div>

Создадим кнопку с атрибутами data-action, data-tpl, data-parents, в которых будем передавать необходимые данные:

Параметр Значение Что обозначает
data-action getResources Сниппет для вывода информации
data-tpl tpl.getResources.row Чанк вывода отдельной статьи
data-parents [[*id]] Родительский контейнер, из которого будем выводить посты, в данном случае - текущий ресурс

Чанк tpl.getResources.row:

<div>
    <h3><a href=""></a></h3>
    <p></p>
    <p></p>
</div>

Кнопка "Показать ещё":

<button class="more" data-action="getResources" data-tpl="tpl.getResources.row" data-parents="233">Показать ещё</button>

Создадим скрипт, который будет обрабатывать нажатие кнопки и отправлять post-запрос, в нём укажем следующие параметры:

Параметр Значение Что обозначает
offset 0 Начальный сдвиг равен 0
.post(URL,data,...)) 'https://modx.ws/demo/ajax' URL ресурса, отвечающего на AJAX запросы
limit 5 По-умолчанию лимит равен 5, поэтому сдвиг будет offset+=5
<!-- Наш скрипт запроса и обработки -->
<script type="text/javascript">
$(document).ready(function() {
  var offset = 0;
  // Вешаем обработчик события "клик" на кнопку с классом .more
  $('button.more').click(function() {

    // Ajax post-запрос к странице, выдающей ресурсы (в ней сниппет ajaxResources) 
    var data = $(this).data();

    $.post('https://modx.ws/demo/ajax', data, function(data) {
      offset +=5;
      // Выдаем ответ
      $('#result').append(data);
      $('button.more').data('offset', offset);
    })
    // В случае если у вас вместо кнопки ссылка - a href="#", то расскоментируйте строку ниже
    // return false;
  })
})
</script>

Исходя из того, что параметр offset (сдвиг) - это переменная, которая изменяется и является динамической, то я храню и обрабатываю её джаваскриптом. Правильным было бы использование data-offset, data-limit параметров, но для простоты кода сделал так.

Создадим ресурс с пcевдонимом ajax, который будет отдавать данные, чтобы полный адрес был sitename.com/ajax. Зададим ему шаблон Blank и вставим в содержимое вызов сниппета ajaxResources.

Cниппет ajaxResources

<?php
// Отвечаем ТОЛЬКО на ajax запросы
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}

// данный код можно расширить добавив другие действия и указать их в case
$action = filter_input(INPUT_POST,'action');

// Если в массиве POST нет действия - выход
if (empty($action)) {return;}

// А если есть - работаем
$res = '';
switch ($action) {
    case 'getResources': 
        // Задаём параметры для сниппета в AJAX запросе
        $params = array();
        $params['tpl'] = filter_input(INPUT_POST,'tpl');
        $params['parents'] = filter_input(INPUT_POST, 'parents', FILTER_SANITIZE_NUMBER_INT);
        $params['offset'] = filter_input(INPUT_POST, 'offset', FILTER_SANITIZE_NUMBER_INT);
        $res = $modx->runSnippet('getResources', $params); break;

}
// Если у нас есть, что отдать на запрос - отдаем и прерываем работу парсера MODX
if (!empty($res)) {
    die($res);
}

Демо