Ajax в Drupal 7

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

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

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

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

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

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

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

/* hook menu */

function mymodule_menu() {

//страница приема данных по ajax

$items['ajax-request'] = array(

'page callback' => '_mymodule_ajaxcode',

'access arguments' => array('access content'),

'type' => MENU_CALLBACK,

);

return $items;

}

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

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

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

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

function  _mymodule_ajaxcode() {
    $html_code = '';
    //формируем код 
    ....
    //формируем заголовки документа - указываем, что кодировка UTF8
    header('Content-Type: text/html; charset=UTF-8');
    echo $html_code;
    //конец исполнения программы
    exit;
}

function _mymodule_ajaxcode() {

$html_code = '';

//формируем код

....

//формируем заголовки документа - указываем, что кодировка UTF8

header('Content-Type: text/html; charset=UTF-8');

echo $html_code;

//конец исполнения программы

exit;

}

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

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

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

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

drupal_json_encode($var);

1	drupal_json_encode($var);

function  _mymodule_ajaxcode() {
    $a = array();
    //формируем какие то данные в массиве $a 
    ....
    //формируем заголовки документа - указываем, что кодировка UTF8
    header('Content-Type: text/html; charset=UTF-8');
    echo drupal_json_encode($a);
    //конец исполнения программы
    exit;
}

function _mymodule_ajaxcode() {

$a = array();

//формируем какие то данные в массиве $a

....

//формируем заголовки документа - указываем, что кодировка UTF8

header('Content-Type: text/html; charset=UTF-8');

echo drupal_json_encode($a);

//конец исполнения программы

exit;

}

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

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

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

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

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

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;
}

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;

}

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

<div onclick="
    $.ajax('/ajax-request/1000')
    //если все путем
    .done(function(data) {
        //вычисляем данные, полученные с сервера
        var a = eval(data);
        //выводим случайное число в контейнере c id = rnd
        $('#rnd').html(a[0]);
        //выводим сообщение 
        alert(a[1]);
    })
    //если возникает ошибка
    .fail(function() {
        alert( 'error' );
    });
">Нажми меня, чтобы получить случайное число</div>
<div id="rnd"></div>

<div onclick="

$.ajax('/ajax-request/1000')

//если все путем

.done(function(data) {

//вычисляем данные, полученные с сервера

var a = eval(data);

//выводим случайное число в контейнере c id = rnd

$('#rnd').html(a[0]);

//выводим сообщение

alert(a[1]);

})

//если возникает ошибка

.fail(function() {

alert( 'error' );

});

">Нажми меня, чтобы получить случайное число</div>

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

ajax

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

Данная запись опубликована в 31.08.2015 22:00 и размещена в рубрике drupal, jQuery. Вы можете перейти в конец страницы и оставить ваш комментарий.

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

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

Ноябрь 11, 2016 г.

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

Читать

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить такой ...

Читать

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

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

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

Кирилл:

5 июля 2016 в 19:18

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

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

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

6 июля 2016 в 20:32

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

Ответить
- admin:
  
  7 июля 2016 в 02:07
  
  Тут бы посмотреть код…
  Судя по ошибке, drupal не знает адреса — /site/ajax-request/. В тексте статьи я предлагал пример с адресом /ajax-request/, возможно связано с ошибкой в HTML шаблоне? Проверьте верен ли адрес.
  
  Ответить
  - Кирилл:
    
    7 июля 2016 в 16:16
    
    Довольно странно, ведь у меня всё как в примере:
    
    Код модуля:
    /* 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;
    }
    
    Код в шаблоне:
    Нажми меня, чтобы получить случайное число
  - Кирилл:
    
    7 июля 2016 в 17:25
    
    В комментарий всё не влезло. В общем, у меня тот же самый код, что в примере, однако почему-то адрес не находится.
  - Кирилл:
    
    11 июля 2016 в 22:49
    
    Попробовал просто перейти по адресу site/ajax-request. Выдаёт ошибку 404. Может ли быть такое, что какие-то модули или настройки Drupal блокируют этот адрес? Может, его нужно зарегистрировать с помощью какой-нибудь функции или что-то вроде того?
  - admin:
    
    11 июля 2016 в 22:57
    
    Надо все проверить, начиная с того включен ли модуль mymodule. Раз по адресу, объявляемому в mymodule_menu() выдает ошибку 404, ясно что drupal не подключил этот адрес.
  - Кирилл:
    
    12 июля 2016 в 01:46
    
    Я не знаю, что именно помогло, — повторный сброс кэша, изменение названия модуля на MyModule (чтобы совпадало с названиями функций) или же ещё что-то, но теперь всё работает.
    Спасибо за помощь!

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: