Drupal 8. Несколько способов вывода информации черех Ajax

О том, как осуществить вывод информации с использованием ajax в Drupal 8. В Drupal 8 имеется несколько методов вывода информации через ajax - c применением методов Api и с использованием стандартных функций jQuery. При этом jQuery в Drupal 8 установлена по умолчанию.

Первый пример, первый способ.

Поэтому первым примером рассмотрим загрузку содержимого с использованием стандартных функций фреймовика jQuery. В качестве примера я буду использовать вывод представления (view). При этом первый пример будет выводить "голый html".

Для этого необходимо использовать функции модулей. Итак создадим простой модуль со следующей структурой.

Описывать создание простого модуля я не буду, статью на данную тематику можно посмотреть по адресу - /node/974. Сразу перейду к файлу welcome.routing.yml.

developer.kommentiruemoe:
  path: 'developer/kommentiruemoe'
  defaults: { _controller: '\Drupal\developer\Controller\DeveloperController::kommentiruemoe' }
  requirements:
    _access: 'TRUE'

В нем необходимо создать маршрут, путь по которому класс контроллер будет выводить результат. В нашем случае это developer/kommentiruemoe

Код контроллера следующий:

/** * @param Request $request * @return Response * Возвращает последние статьи через ajax запрос */ public function populyarye_stati(Request $request) { $view = \Drupal\views\Views::getView('populyarye_stati'); // $view->setDisplay('default'); // contextual relationship filter //$view->setArguments([$id]); //$render_view = $view->render(); // $view->execute(); if (is_object($view)) { //$view->setArguments($args); $view->setDisplay('block_1'); $view->preExecute(); $view->execute(); $content = $view->buildRenderable('block_1'); } //dpm($content); $output = [ '#items' => $content, '#theme' => 'getlastpost', '#template' => 'getlastpost', '#title' => '', ]; return new Response(render($output)); }

При этом обратите внимание на строчку:

return new Response(render($output)); 

без нее вывести "голый" html не получится.

В данном примере я выводил view последних статей. Для передачи и получения параметров через GET и POST можно использовать следующий код:

// $_GET $nid = \Drupal::request()->query->get('nid'); $all_get_params = \Drupal::request()->query->all(); // $_POST $nid = \Drupal::request()->request->get('nid'); $all_post_params = \Drupal::request()->request->all();

Можно использовать более сложную вариацию вывода информации из представления.

// Get and loop through the View `group_members_per_group`
//$args = [$gid];
$view = \Drupal\views\Views::getView('group_members_per_group');
//$view->setArguments($args);
$view->setDisplay('default');
$view->execute();

// Get the results of the view.
$view_result = $view->result;

// Check if the view is not empty and return results.
if (!empty($view_result)) {

// If the view returns results...
foreach ($view->result as $row) {

// Get the full name value.
  foreach ($view->result as $id => $result) {
    $node = $result->_entity;
    // Get the full name value.
    $name = $node->get('field_user_full_name')->value;
    // check the result output for testing only.
    \Drupal::messenger()->addMessage(t($name));
  }

  }
 }

Можно выводить не только view, но и например node:

$node = \Drupal\node\Entity\Node::load(123); $node_view_builder = \Drupal::entityTypeManager()->getViewBuilder('node'); $node_build = $node_view_builder->view($node, 'teaser');

На jQuery код выглядит следующим образом:

var isscrolled5 = false; $(window).scroll(function() { if (!isscrolled5) { isscrolled5 = true; $.ajax({ url: "/developer/kommentiruemoe", data: {plus: 1}, success: function (data) { $('#mnogocomments').append(data); }, type: 'GET' }); } });

Таким образом, при прокрутке окна срабатывает функция jQuery.ajax.
Это к примеру, если вам необходимо получить и вывесить отдельные данные из view, а не весь код.
 

2 cпособ вывода информации через ajax.

Второй способ основывается на на классе AjaxResponse();
К примеру, данный код заменяет информацию на node.

 public function loadContent($nid) {

    # Get NID render
    $node = \Drupal::entityTypeManager()->getStorage('node')->load($nid);
    $node_view = render(\Drupal::entityTypeManager()->getViewBuilder('node')->view($node, 'full'));

    # New response
    $response = new AjaxResponse();

    # Commands Ajax
    $selector = '.load-content';
    $response->addCommand(new ReplaceCommand($selector, $node_view, $settings = NULL));

    # Return response
    return $response;

  }

В примере выше элемент структуры DOM с селектором .load-content будет заменен.

Ajax api Drupal 8 содержит целый перчень команд для работы с ajax (поный перечень команд можно найти в статье "Core AJAX Callback Commands").
Полная концепция ajax API находится по адресу https://www.drupal.org/docs/8/api/ajax-api/basic-concepts и по адресу https://www.drupal.org/docs/8/api/ajax-api. Примеры работы с загрузкой элементов форм через  ajax запросы можно найти по адресу https://www.drupal.org/docs/8/api/javascript-api/ajax-forms.

Еще одним интересным способом вывода информации является загрузка  информации из блока

Разберем пример указанный ниже:

namespace Drupal\generator\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal\generator\Form\ProjektForm; class GeneratorBlock extends BlockBase { public function build() { return array( 'form_wrapper' => array( '#prefix' => '<div id="form-wrapper">', '#suffix' => '</div>', '#markup' => '', ), 'load_form' => array( '#type' => 'button', '#value' => $this->t('Load form'), '#ajax' => array( 'wrapper' => 'form-wrapper', 'callback' => array(static::class, 'getForm'), ), ), '#attached' => array( 'library' => array( 'generator/generator-css' ), ), ); } public static function getForm() { return \Drupal::formBuilder()->getForm(ProjektForm::class); } }

В данном примере мы вводим форму через ajax. Как вы догадались можно вывести почти все что угодно. К сажалению, указанный код не работает во всех версиях Drupal 8. В моей версии 8.7.0 данный метод на сработал.

3 способ. Дополнительный пример вывода ajax данных (вывод формы и связанных с ней элементов):

<?php
/**
 * @file
 * Contains \Drupal\portfolio\Form\Test.
 *
 * В комментарии выше указываем, что содержится в данном файле.
 */

// Объявляем пространство имён формы. Drupal\НАЗВАНИЕ_МОДУЛЯ\Form
namespace Drupal\portfolio\Form;

// Указываем что нам потребуется FormBase, от которого мы будем наследоваться
// а также FormStateInterface который позволит работать с данными.
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\node\Entity\Node;
use Drupal\file\Entity\File;
use Drupal\Core\Datetime\DrupalDateTime;
use Symfony\Component\HttpFoundation\Request;


/**
 * Объявляем нашу форму, наследуясь от FormBase.
 * Название класса строго должно соответствовать названию файла.
 */

class Test extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'default_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    // Create a select field that will update the contents
    // of the textbox below.
    // Create a select field that will update the contents
    // of the textbox below.
    $form['example_select'] = [
      '#type' => 'select',
      '#title' => $this->t('Example select field'),
      '#options' => [
        '1' => $this->t('One'),
        '2' => $this->t('Two'),
        '3' => $this->t('Three'),
        '4' => $this->t('From New York to Ger-ma-ny!'),
      ],
      '#ajax' => [
        'callback' => '::myAjaxCallback', // don't forget :: when calling a class method.
        //'callback' => [$this, 'myAjaxCallback'], //alternative notation
        'disable-refocus' => FALSE, // Or TRUE to prevent re-focusing on the triggering element.
        'event' => 'change',
        'wrapper' => 'edit-output', // This element is updated with this AJAX callback.
        'progress' => [
          'type' => 'throbber',
          'message' => $this->t('Verifying entry...'),
        ],
      ]
    ];

    // Create a textbox that will be updated
    // when the user selects an item from the select box above.
    $form['output'] = [
      '#type' => 'textfield',
      '#size' => '60',
      '#disabled' => TRUE,
      '#value' => 'Hello, Drupal!!1',
      '#prefix' => '<div id="edit-output">',
      '#suffix' => '</div>',
    ];

    // Create the submit button.
    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];

    return $form;
  }

  // Get the value from example select field and fill
  // the textbox with the selected text.
  public function myAjaxCallback(array &$form, FormStateInterface $form_state) {
    // Prepare our textfield. check if the example select field has a selected option.
    if ($selectedValue = $form_state->getValue('example_select')) {
      // Get the text of the selected option.
      $selectedText = $form['example_select']['#options'][$selectedValue];
      // Place the text of the selected option in our textfield.
      $form['output']['#value'] = $selectedText;
    }
    // Return the prepared textfield.
    return $form['output'];
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Display result.
    foreach ($form_state->getValues() as $key => $value) {
      \Drupal::messenger()->addStatus($key . ': ' . $value);
    }
  }


}

При этом, внутри функции myAjaxCallback возможно использовать различные методы для обновления данных форму и ее элементов. Полный пример содержится на официальном сайте https://www.drupal.org/docs/8/api/javascript-api/ajax-forms#s-ajax-commands-ajaxresponse.