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

в 8:57, , рубрики: modx, tutorial, метки:

Все привет, много уже было написано про обработку 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=`alex@404studio.ru`
            &emailFrom=`norelpy@404studio.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 не нужно, ответ приходит уже обработанный парсером.
На этом всё, надеюсь моя небольшая статья сделает жизнь кому-то чуточку легче.
Удачи всем и до новых встреч.

Автор: shot131

Источник

Поделиться

* - обязательные к заполнению поля