Как использовать AJAX-запросы в Magento

23/01/2018

AJAX (Asynchronous JavaScript And XML — Асинхронный JavaScript и XML) – это уже достаточно устарелая, но очень популярная технология в Интернете, которая позволяет получать информацию с сервера, не перезагружая всю страницу (а обновляя только нужные блоки сайта).

В этом уроке мы рассмотрим практическое использование технологии AJAX в вашем собственном модуле, который разработан для CMS Magento.

Практика

1) Создайте контроллер в своем модуле по следующему адресу, например:

Namespace/ModuleName/controllers/AjaxController.php

или создайте новый action (действие) в уже существующем контроллере.

2) Чтобы создать действие в контроллере, например indexAction(), добавьте этот код в файл контроллера:

public function indexAction() {
  $this->loadLayout();
  $this->renderLayout();
}

3) Затем добавьте в файл обновления макета в теме, например,

app/design/frontend/ThemePackage/Theme/layout/ajax-layout.xml

такой код:

<modulename_ajax_index>
  <block type="modulename/block" name="root" template="path/to/template.phtml" />
</modulename_ajax_index>

где нод modulename – это маршрутизатор фронтенда, ajax – это название контроллера, а index – название действия контроллера

4) После этого добавьте обновление макета в файле config.xml в папке etc модуля:

<layout>
  <updates>
    <modulename>
      <file>ajax-layout.xml</file>
    </modulename>
  </updates>
</layout>

5) После этого очистите кэш, и вы будете иметь доступ к экземпляру класса Block из файла-шаблона template.phtml

6) И, наконец, чтобы протестировать хорошую работу, вызываем Ajax контроллер с шаблона с помощью простого JavaScript, например:

xmlhttp.open("GET","/modulename/ajax/index/test/"+value,true);

или же с помощью библиотеки jQuery:

jQuery.ajax({
  url: "<?php echo $this->getUrl('modulename/ajax/index'); ?>",
  type: "POST",
  data: "size="+jQuery(this).val(),
  success: function(data) {
   jQuery('#results').html(data);
  }
});