Даю полный перевод обучалки по использованию Ajax (на нее, кстати, ссылались здесь). Это дубль перевода с моего сайта, который я выложил более недели назад.
Следующее руководство шаг за шагом научит вас быстрому применению Аякса в Друпале. Мы динамически обновим страницу контентом, прочитанным с сервера, без необходимости обновлять страницу. Я постараюсь сделать это по возможности просто, описывая самые основные блоки, требуемые для внедрения Аякса. Я предлагаю вам двинуться дальше и попытаться вставить более сложные вещи, исходя из нужд вашего сайта.
Давайте начнем. Как-то я создал сайт электронной коммерции, основанный на Drupal 6 & Ubercart и теперь хочу улучшить его, применив для отображения товаров Аякс. Я хочу, чтобы пользователи выбрали категорию товаров из списка, и основываясь на этом выборе, получили список товаров для данной категории.
Замечание: я рекомендую, чтобы вы познакомились с разработкой модулей в Друпале (руководство можно найти здесь http://drupal.org/node/231276)
Шаг № 1 – Создание вашего «Модуля данных»
Для того чтобы получить данные от клиента, мы должны начать с создания модуля, который будет возвращать данные с сервера. Давайте назовем наш новый модуль “dynamic_products”. Прежде всего создади каталог для нашего нового модуля. Он должен находиться в каталоге “modules” вашего сайта (обычно /sites/default/modules). Все файлы, описанные далее в этом разделе, должны создаваться в этом каталоге. Затем создадим файл .info вашего модуля. Этот файл предоставляет информацию Друпала о вашем файле, которая нужна для его активации.
Больше информации о создании .info файла можно найти здесь http://drupal.org/node/231036
Для нашего .info файла мы будем использовать следующее:
; $Id$ name = "Dynamic Products" description = "Returns a list of products according to category." core = 6.x package = Example Ajax Modules
Копируем, вставляем и сохраняем верхний код в “dynamic_products.info”. После того как мы создадим наш .info файл, мы продолжим далее создание нашего файла .module. Этот файл включает рабочий код со стороны сервера. Вернемся вверх и создадим файл “dynamic_products.info” в каталоге нашего модуля..
Для того чтобы создать вызов сервера и получить некоторые данные, нам нужен menu_hook, который будет использован для «перехвата» вызова аякса. В нем будет использоваться следующая функция:
function dynamic_products_menu() { $items = array(); $items['products/get'] = array( 'title' => 'Dynamic Products', 'page callback' => 'dynamic_products_get_by_category_id', 'access arguments' => array('access dynamic_products content'), 'type' => MENU_CALLBACK ); return $items; }
Эта функция заставляет перехватывать все обращения по адресам “http://www.example.com/?q=products/get” или http//www.example.com/products/get и вызывать функцию обратного вызова dynamic_products_get_by_category_id.
Далее мы сообщим Друпалу, кто имеет разрешения на использование нашего модуля. Для этого мы применим Друпаловский hook_perm().
function dynamic_products_perm() { return array('access dynamic_products content'); }
Теперь пришло время создать функцию обратного вызова, которая вернет нам данные с сервера. С этой целью в этом руководстве мы создадим простой список товаров. В реальной жизни данные могут быть получены со стороны или любым другим удобным вам путем.
function dynamic_products_get_by_category_id($cat_id){ $items = ''; switch($cat_id){ case 12: $items = '<ul><li>Product 1</li><li>Product 2</li></ul>'; break; case 20: $items = '<ul><li>Product 3</li><li>Product 4</li></ul>'; break; } // создаем объект JSON. Он будет содержать свойство под названием “products”, которое является набором переменных $items. return drupal_json(array('products'=>$items)); exit; }
Наша функция обратного вызова принимает один параметр ($cat_id). В зависимости от его значения возвращаются разные списки товаров.
Функция может иметь столько параметров, сколько нам нужно. Для передачи их в функцию мы используем Url вызова Аякса
Как вы помните, ранее мы определили функцию menu_hook (dynamic_products_menu), и настроили наш модуль на перехват обращений, сделанных по адресу “http://www.example.com/products/get”.
Для того чтобы добавить id категории к нашей функции обратного вызова, мы просто добавим его к url запроса.
Например, если мы хотим использовать значение 12 как id категории, мы просто используем следующий url http://www.example.com/products/get/12.
Мы почти закончили делать наш файл dynamic_products.module. Позже мы вернемся к нему, а сейчас сохраним его и пойдем далее.
Шаг № 2 – Создание файла javascript
Теперь мы создадим файл javascript, который будет включать клиентскую часть, создающую вызов аякса. Создадим новый файл в каталоге модуля и назовем его dynamic_products.js. Представленный код задает обработку события нажатия кнопки одного из html-элементов на нашей странице.
// $Id$ Drupal.behaviors.dynamic_products = function (context) { $('a.categoryLink:not(.categoryLink-processed)', context).click(function () { // Эта функция будет выполняться после того, как ajax запрос на сервер был выполнен успешно var updateProducts = function(data) { // Параметр "data" является объектом JSON. Свойство “products” является списком товаров, который возвращается с сервера в ответ на запрос ajax. $('#divProducts').html(data.products); } $.ajax({ type: 'POST', url: this.href, // Which url should be handle the ajax request. This is the url defined in the <a> html tag success: updateProducts, // The js function that will be called upon success request dataType: 'json', //define the type of data that is going to get back from the server data: 'js=1' //Pass a key/value pair }); return false; // return false so the navigation stops here and not continue to the page in the link }).addClass('categoryLink-processed'); }
Копируем, вставляем и сохраняем верхний код в “ файл dynamic_products.js ”. С ним мы работу закончили.
Шаг № 3 – загрузка файла javascript
Для того чтобы загрузить .js файл со стороны клиента, нам нужно вернуться и отредактировать наш файл .module. Для этого нам при инициализации модуля нужно использовать init_hook. Для того чтобы это сделать добавим следующие строки к файлу .module:
function dynamic_products_theme() { return array( 'dynamic_products_javascript' => array( 'arguments' => array(), ), ); } function dynamic_products_init() { theme('dynamic_products_javascript'); } function theme_dynamic_products_javascript() { drupal_add_js(drupal_get_path('module', 'dynamic_products') . '/dynamic_products.js'); }
Сохраняем файл.
Замечание: не забудем активировать наш новый модуль на странице "admin/build/modules".
Шаг № 4 – Создание Html
Мы почти закончили. Нам нужно только создать на нашей странице код html, который будет делать вызов аякса. Чтобы упростить работу, давайте создадим 2 раздела div вверху страницы. Верхний div будет включать 2 ссылки, по одной для каждой категории товара. После щелчка на одной из этих ссылок будет отправляться запрос на сервер, а загруженный контент будет вставляться в нижний div.
<div id=”topDiv”> <a class="categoryLink" href="/products/get/12">Cat. 1</a> <a class="categoryLink" href="/products/get/20">Cat. 2</a> </div> <div id="divProducts"></div>
Создайте страницу Друпала, скопируйте и вставьте верхний код, и это все. При просмотре страницы при щелчке на одной из ссылок категорий на сервер будет отправляться запрос, и на странице будет отображаться список товаров выбранной категории.
Источник: http://www.drupal.ru/node/63094
Добавить комментарий к записи "Ajax: очередной перевод статьи"
Чтобы комментировать, необходимо войти в систему.