Учим контроллеры работать через Ajax

• javascript посылает запрос на сервер, используя метод XMLHttpRequest

• Контроллер определяет, что запросы был сделан через ajax и отвечать нужно в определённом формате - мы любим JSON

• При успехе или ошибке на фронтенд всегда возвращается массив с данными установленного формата

• В зависимости от ответа, javascript что-то делает со страницей

Общая поддержка ajax

/** @var bool $isAjax */
public $isAjax = false;

$controller->isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';

    /**
     * Вывод ответа в установленном формате для всех Ajax запросов
     *
     * @param bool|true $success
     * @param string $message
     * @param array $data
     */
    public function ajaxResponse($success = true, $message = '', array $data = array()) {
        $response = array(
            'success' => $success, // успех или ошибка операции
            'message' => $message, // произвольное сообщение о статусе операции
            'data' => $data, // массив с данными для работы, который выдал контроллер
        );

        exit(json_encode($response)); // прерываем всю работу и выдаём ответ в JSON
    }

    public function redirect($url = '/') {
        if ($this->isAjax) {
            $this->core->ajaxResponse(false, 'Редирект на другой адрес', array('redirect' => $url));
        }
        else {
            header("Location: {$url}");
            exit();
        }
    }

        if ($controller->isAjax) {
            $this->ajaxResponse(false, 'Не могу обработать ajax запрос');
        }
        else {
            echo $response;
        }

Ajax пагинация

{block 'content'}
    {if $items}
        <div id="news-wrapper">
            <div id="news-items">
                {insert '_news.tpl'}
            </div>
            <div id="news-pagination">
                {if $pagination}
                    {insert '_pagination.tpl'}
                {/if}
            </div>
        </div>
    {else}
        <a href="/news/">← Назад</a>
        {parent}
    {/if}
{/block}

<div id="news-wrapper">
    ...
</div>

        // Проверяем режим работы
        if ($this->isAjax) {
            // Если контроллер отображает одну новость - выдаём ошибку, это не пагинация
            if ($this->item) {
                $this->core->ajaxResponse(false, 'Контроллер News не принимает ajax в режиме показа отдельной новости');
            }
            // Ошибки нет, работаем штатно
            $items = $this->getItems();
            $pagination = $this->getPagination($this->_total, $this->page, $this->limit);
            $this->core->ajaxResponse(true, '', array(
                // Отдельный рендер списка новостей
                'items' => $this->template('_news', array('items' => $items), $this), 
                // Отдельный рендер постраничной навигации
                'pagination' => $this->template('_pagination', array('pagination' => $pagination), $this),
                // Служебные данные, на всякий случай
                'total' => $this->_total, // Сколько всего страниц
                'page' => $this->page, // Текущая страница
                'limit' => $this->limit, // Количество статей на страницу
            ));
        }
        // Дальше всё идёт как раньше

            // Добавляем проверку isAjax для первой страницы
            if (!$this->_offset && !$this->item && !$this->isAjax) {
                $this->redirect("/{$this->name}/");
            }

Javascript для ajax пагинации

<footer>
    {block 'js'}
        <script src="/assets/js/jquery-2.1.4.min.js"></script>
        <script src="/assets/js/bootstrap.min.js"></script>
        <script src="/assets/js/main.js"></script>
    {/block}
</footer>

// Вешаем обработчик на нажатия кнопок постраничной навигации
$('#news-wrapper').on('click', '#news-pagination a', function() {
    var href = $(this).attr('href'); // Определяем ссылку
    // Пустые ссылки не обрабатываем
    if (href != '') {
        // Для индикации работы через ajax делаем элемент-обёртку полупрозрачным
        var wrapper = $('#news-wrapper');
        wrapper.css('opacity', .5);
        // Запрашиваем страницу через ajax
        $.get(href, function(res) {
            // При получении любого ответа делаем обёртку обратно непрозрачной 
            wrapper.css('opacity', 1);
            // Получен успешный ответ
            if (res.success) {
                // Меняем содержимое элементов
                // новости
                $('#news-items').html(res.data['items']);
                // постраничная навигация
                $('#news-pagination').html(res.data['pagination']);
            }
            // Ответ с ошибкой и в массиве данных указан адрес перенаправления
            else if (res.data['redirect']) {
                // Редиректим пользователя
                window.location = res.data['redirect'];
            }
            // Иначе пишем ошибку в консоль и больше ничего не делаем
            else {
                console.log(res);
                // А вообще, здесь можно и вывести ошибку на экран
                // alert(res.data['message']);
            }
        }, 'json');
    }
    // В любом случае не даём перейти по ссылке - у нас же тут ajax пагинация
    return false;
});

Бонус

1. Новый браузер, который поддерживает history.js и умеет менять url в браузере без перезагрузки страницы

2. Очень старый браузер, в котором нужно работать через hash

var oldBrowser = !(window.history && history.pushState);
if (!oldBrowser) {
    // Добавляем в историю текущую страницу при первом открытии раздела
    history.replaceState({pagination: window.location.href}, '');
}

function loadPage(href) {
    var wrapper = $('#news-wrapper');
    wrapper.css('opacity', .5);
    $.get(href, function(res) {
        wrapper.css('opacity', 1);
        if (res.success) {
            $('#news-items').html(res.data['items']);
            $('#news-pagination').html(res.data['pagination']);
        }
        else if (res.data['redirect']) {
            window.location = res.data['redirect'];
        }
        else {
            console.log(res);
        }
    }, 'json');
}

$('#news-wrapper').on('click', '#news-pagination a', function() {
    var href = $(this).attr('href');

    if (href != '') {
        // Если браузер не старый - добавляем адрес страницы ему в историю
        if (!oldBrowser) {
            window.history.pushState({pagination: href}, '', href);
        }
        // И загружаем её
        loadPage(href);
    }

    return false;
});

$(window).on('popstate', function(e) {
    // Проверяем данные внутри события, и если там наш pagination
    if (e.originalEvent.state && e.originalEvent.state['pagination']) {
        // То загружаем сохранённую страницу
        loadPage(e.originalEvent.state['pagination']);
    }
});

Заключение

P.S.