Очень простой способ обработки ajax запросов в MODx Revolution / Хабр

Все привет, много уже было написано про обработку ajax запросов на фронтенд части сайта в MODx Revolution, есть даже несколько готовых дополнений.
В свою очередь, я хочу предложить ещё один, очень простой способ обработки ajax запросов в MODx Revolution.

Для начала создадим плагин под названием ajaxReqeust, со следующим содержимым:

<?php
if ($modx->event->name == 'OnLoadWebDocument') {
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $modx->resource->set('cacheable', 0);
        $modx->resource->set('template', 0);
    }
}

Плагин должен срабатывать на системное событие «OnLoadWebDocument».
Данный плагин позволит нам выполнять ajax запросы к ресурсам и получать в ответ только содержимое, без шаблона.
Всё что от нас требуется — это сохранить нужный сниппет или чанк в контент ресурса.

В качестве примера, рассмотрим процесс обработки формы, отправленной посредством ajax запроса.

Создадим новый ресурс с любыми данными, в поле контент введём стандартный вызов сниппета FormIt:

<div id="feedback_form">
    <h2>Форма обратной связи</h2>
    [[!request? &k=`success` &toPlaceholder=`success`]]
    [[+success:is=``:then=`
        [[!FormIt? 
            &hooks=`email,redirect`
            &redirectTo=`[[*id]]`
            &redirectParams=`{"success":"1"}`
            &emailTpl=`feedbackEmailTpl`
            &emailSubject=`Новый вопрос с сайта [[++site_name]]`
            &emailTo=`info@unicontent-studio.ru`
            &emailFrom=`noreply@unicontent-studio.ru`
            &emailFromName=`[[++site_name]]`
            &validate=`
                name:required:stripTags,
                email:email:required,
                message:required:stripTags
            `
            &clearFieldsOnSuccess=`1`
            &validationErrorMessage=`Возникли ошибки при отправке сообщения.`
        ]]

        <form data-target="#feedback_form" class="ajax-form" action="[[~[[*id]]]]" method="POST">
            <div>
                <label>Имя:</label>
                <input type="text" value="[[!+fi.name]]" name="name" />
                [[!+fi.error.name]]
            </div>
            <div>
                <label>E-mail:</label>
                <input type="text" value="[[!+fi.email]]" name="email" />
                [[!+fi.error.email]]
            </div>
            <div>
                <label>Сообщение:</label>
                <textarea name="message">[[!+fi.message]]</textarea>
                [[!+fi.error.message]]
            </div>
            <input type="submit" name="submit" value="Отправить" />
        </form>
    `:else=`
        <p>Ваше сообщение успешно отправлено.</p>
    `]]
</div>

Создадим небольшой сниппет под названием request, который позволит нам вывести сообщение, в случае успешной отправки формы:

<?php
$result = isset($_REQUEST[$k])? strip_tags($_REQUEST[$k]) : '';
if (!empty($toPlaceholder)) {
    $modx->toPlaceholder($toPlaceholder, $result);
}
else {
    return $result;
}

Всё что нам осталось сделать — это подключить небольшой jQuery код в страницу, на которую будет выводиться форма.
Данный скрипт сабмитит форму посредством ajax запроса и обрабатывает полученный ответ:

$(document).ready(function() {
    $('body').on('submit', '.ajax-form', function(e) {
        e.preventDefault();
        var target = this;
        if ($(this).data('target') != undefined) {
            target = $(this).data('target');
        }
        values = $(this).serializeArray();
        $(this).find('input[type="submit"]').attr('disabled', 'disabled');
        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: $(this).attr('action'),
            data: values,
            success: function(data) {
                $(target).replaceWith(data);
            }
        });
    });
});

Вот пожалуй и всё, просто не правда ли?
Больше ничего делать не нужно, никаких дополнительных скриптов, коннекторов и процессоров, всего один небольшой плагин, а обо всём остальном за нас позаботится MODx.
Чанки и сниппеты будут обрабатываться так, как это делается при обычных запросах, то есть никаких хаков для обработки тегов MODx не нужно, ответ прихо��ит уже обработанный парсером.
На этом всё, надеюсь моя небольшая статья сделает жизнь кому-то чуточку легче.
Удачи всем и до новых встреч.

Очень простой способ обработки ajax запросов в MODx Revolution

Публикации

Ближайшие события