Ajax в Drupal 7

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов.

Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы получать данные облаченные во весь шаблон текущей темы оформления. В-третьих, надо помнить, что в drupal уже подключена библиотека jQuery, так что нам можно использовать реализацию механизма ajax в её составе.

Далее обо всем по-порядку.

Специальный раздел на сайте

Описание раздела сайта нужно начинать в рамках какого-то своего модуля. Мы будем это делать в модуле — mymodule. Надеюсь, что создавать новые модули для drupal, подключать и активировать их, вы умеете. Для каждого нового проекта я собираю все дополнительное программирование в рамках одного модуля (иногда нескольких).

Итак, мы программируем хук hook_menu.

В примере мы объявили обработчик для пути сайта http://mysite.net/ajax-request — функцию — _mymodule_ajaxcode. Необходимый тип объявленного раздела — MENU_CALLBACK, который говорит drupal, что это не обычный пункт меню, а просто связка адреса (uri) и обработчика.

Далее рассмотрим примеры функций-обработчиков.

Вернуть в качестве результата ajax — код HTML

Этот случай довольно прост. Нужно в ответ на запрос, вернуть какой то HTML кусочек.

Важно указать кодировку документа и выйти по exit. Все что вы выведите в консоль — будет результатом запроса.

Все адреса http://mysite.net/ajax-request/path1/path2/  и т.п. также будут направлены на данный обработчик. Так можно передавать параметры, читая их потом функцией arg(1), arg(2)… Никто не мешает передавать в тоже время $_POST и $_GET данные. Тут подводных камней нет.

Вернуть в качестве результата ajax — код json

В друпал встроена функция для сериализации переменных, которая пишет в формате читаемом javascript.

Вызов запроса ajax в шаблоне

Как вы убедились, со стороны сервера в drupal — всё проще пареной репы. Как организуется часть обмена данными со стороны шаблона javasctipt + HTML?

Рассмотрим незамысловатый примерчик. Будем запрашивать случайное число с сервера, по каждому нажатию на надпись «Нажми меня..».

Нам нужно запрограммировать событие — onclick, по которому будет вызываться ajax механизм. При получении данных, будем вставлять их в контейнер с id = rnd.

На сервере мы вычисляем случайное число и отправляем его как элемент массива, где вторым элементом является сообщение — «Получено случайное число».

На стороне клиента используем вот такой HTML код.

Если есть вопросы по поводу работы функции ajax в jQuery, смотрите описание.

Написать комментарий

Мало букафф? Читайте есчо !

Обмен данных Angular с бек-энд на PHP

Ноябрь 11, 2016 г.

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали - frontend, который как то должен взаимодействовать со второй половинкой ...

Читать

Цепляем js-код после ajax в Drupal 7, продолжение экспериментов

Май 6, 2017 г.

Я нашел некоторые особенности того примера, что я давал вчера. Потому я решил немного ещё поэкспериментировать, чтобы дать более качественное решение. ...

Читать

 

Комментарии к «Ajax в Drupal 7»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Ajax в Drupal 7”

  1. Кирилл:

    Здравствуйте!

    Создал и подключил модуль. Сначала при нажатии на элемент возникала ошибка Uncaught TypeError: Cannot read property ‘ajax’ of undefined. Затем я поменял в обработчике onclick $.ajax на jQuery.ajax, и ошибка пропала.
    Однако появилась новая: site/ajax-request/1000 404 (Not Found). И, соответственно, всплывает окно с надписью ‘error’.
    Почему не находится обработчик по адресу ajax-request? Подскажите, пожалуйста, как это исправить и заставить скрипт выполняться.

    • Кирилл, попробуйте сбросить кеш — это делается вот тут /admin/config/development/performance. Тогда drupal подхватит новый адрес и будет выполнять маршрутизацию.

  2. Кирилл:

    Спасибо за ответ!
    К сожалению, очистка кэша не помогла — ошибка по-прежнему возникает. В чём ещё может быть причина?

    • Тут бы посмотреть код…
      Судя по ошибке, drupal не знает адреса — /site/ajax-request/. В тексте статьи я предлагал пример с адресом /ajax-request/, возможно связано с ошибкой в HTML шаблоне? Проверьте верен ли адрес.

      • Кирилл:

        Довольно странно, ведь у меня всё как в примере:

        Код модуля:
        /* hook menu */
        function mymodule_menu() {
        //страница приема данных по ajax
        $items[‘ajax-request’] = array(
        ‘page callback’ => ‘_mymodule_ajaxcode’,
        ‘access arguments’ => array(‘access content’),
        ‘type’ => MENU_CALLBACK,
        );
        return $items;
        }

        function _mymodule_ajaxcode() {
        //читаем аргумент — максимум для случайного числа
        $n = arg(1) + 0;
        header(‘Content-Type: text/html; charset=UTF-8’);
        //возвращаем массив —
        // где элемент 0 — это случайное число,
        // а элемент 1 — строка ‘Получено случайное число’
        echo drupal_json_encode(array(rand(0, $n), ‘Получено случайное число’));
        exit;
        }

        Код в шаблоне:
        Нажми меня, чтобы получить случайное число

      • Кирилл:

        В комментарий всё не влезло. В общем, у меня тот же самый код, что в примере, однако почему-то адрес не находится.

      • Кирилл:

        Попробовал просто перейти по адресу site/ajax-request. Выдаёт ошибку 404. Может ли быть такое, что какие-то модули или настройки Drupal блокируют этот адрес? Может, его нужно зарегистрировать с помощью какой-нибудь функции или что-то вроде того?

      • Надо все проверить, начиная с того включен ли модуль mymodule. Раз по адресу, объявляемому в mymodule_menu() выдает ошибку 404, ясно что drupal не подключил этот адрес.

      • Кирилл:

        Я не знаю, что именно помогло, — повторный сброс кэша, изменение названия модуля на MyModule (чтобы совпадало с названиями функций) или же ещё что-то, но теперь всё работает.
        Спасибо за помощь!