Wie verwendet man die AJAX-API in Drupal 8?

Was ist AJAX?
Es ist keine Programmiersprache, sondern eine Kombination aus – Browser-integriertem XML HttpRequest-Objekt, Javascript und DOM. Es ermöglicht die Aktualisierung von Teilen der Webseite, anstatt die gesamte Webseite zu aktualisieren.
 

Viele Leute verwechseln AJAX mit einer Programmiersprache. Nein, es ist keine Programmiersprache, sondern eine Kombination aus Browser-integriertem XMLHttpRequest-Objekt, Javascript und DOM.

Es ermöglicht die Aktualisierung von Teilen der Webseite, anstatt die gesamte Webseite zu aktualisieren.

Viele verschiedene Ereignisse lösen AJAX aus, wie zum Beispiel:

1. Klicken auf eine Schaltfläche
2. Drücken einer Taste
3. Bewegen der Maus

Außerdem gibt es einige Elemente von AJAX, die behandelt werden müssen, bevor wir fortfahren. Diese sind:

• Callback
• Wrapper
• Methode
• Effekt
• Geschwindigkeit
• Ereignis
• Verhindern
• Fortschritt
• Typ
• URL

In Drupal können AJAX-Antworten durch Formulare ausgelöst werden, die die Drupal Form API verwenden. Hier sind die Schritte für einen AJAX-Aufruf in Drupal:

1. Fügen Sie die Eigenschaft ‘#ajax’ zu einem Formularelement in Ihrem Formular-Array hinzu, um eine AJAX-Antwort auszulösen.
2. Schreiben Sie einen AJAX-Callback, um die Eingabe und Antwort zu verarbeiten.

Die am häufigsten verwendeten AJAX-Klassen
Hier sind einige der am häufigsten verwendeten Ajax-Klassen in Drupal, um Ihre Ajax-Aufrufe zu vereinfachen:

1. AjaxResponse: JSON-Antwortobjekt für AJAX-Anfragen.
2. HtmlCommand: AJAX-Befehl zum Aufrufen der Methode jQuery html().
3. InvokeCommand: AJAX-Befehl zum Aufrufen einer beliebigen jQuery-Methode.
4. AddCssCommand: Ein AJAX-Befehl zum Hinzufügen von CSS zur Seite über Ajax.
5. SettingsCommand: AJAX-Befehl zum Anpassen der JavaScript-Einstellungen von Drupal.
6. PrependCommand: AJAX-Befehl zum Aufrufen der Methode jQuery insert().

Einrichten eines Callbacks zur Verarbeitung von AJAX

Nachdem das Formular so eingestellt ist, dass es die Ajax-Antwort auslöst, schreiben Sie die folgenden PHP-Codes, um die Antworten zu verarbeiten.
  
Wenn Sie 'path' in Ihrem Ajax-Setup verwenden, wird Ihr Routen-Controller nur mit den Informationen ausgelöst, die Sie in der URL angeben.

Wenn Sie 'callback' verwenden, ist Ihre Callback-Methode eine Funktion, die die $form und $form_state aus dem auslösenden Formular empfängt.

Sie können $form_state verwenden, um Informationen über die Daten zu erhalten, die der Benutzer in das Formular eingegeben hat.
  
In unserem Beispiel macht die Funktion Drupal\ajax_module\Form\AjaxModuleForm::usernameValidateCallback dies, um den Benutzernamen zu überprüfen:

    $form_state->getValue('user_name') - Es ruft den Wert aus den Textfeldern im $form['user_name'] Array ab. Wenn der Benutzer gefunden wird, setzt diese Funktion den Markup-Wert & die Farbe wie folgt:
    $text = 'Benutzer gefunden';
    $color = 'grün';

Wenn der Benutzer nicht gefunden wird, setzt diese Funktion sie wie folgt:
    $text = 'Kein Benutzer gefunden';
    $color = 'rot';

Wenn die Eingabe verarbeitet wurde, können Sie das HTML-Markup oder die AJAX-Befehle zurückgeben.
Wenn Sie sich entscheiden, HTML-Markup zurückzugeben, können Sie es als Zeichenkette oder als renderbares Array zurückgeben, und es wird im definierten 'Wrapper'-Element platziert. Zusätzlich werden alle von drupal_get_messages() zurückgegebenen Meldungen, die wie in status-messages.html.twig gestaltet sind, vorangestellt.

Um einen Befehl zurückzugeben, müssen Sie ein Objekt der Klasse \Drupal\Core\Ajax\AjaxResponse einrichten und dann seine Methode addCommand() verwenden, um einzelne Befehle nach Ihren Wünschen hinzuzufügen. In unserem Beispiel haben wir den Befehl wie folgt verwendet: 
$ajax_response->addCommand(new HtmlCommand('#edit-user-name--description', $text));
$ajax_response->addCommand(new InvokeCommand('#edit-user-name--description', 'css', array('color', $color)));
Ersteres ersetzt die Benutzernamenbeschreibung, während letzteres die Farbe dieser Beschreibung ändert.

Lassen Sie uns nun ein benutzerdefiniertes Formular erstellen, das ein Textfeld enthält, das validiert, ob der Benutzername existiert.

Wenn der Benutzername bereits existiert, wird eine Meldung in grüner Farbe angezeigt, andernfalls wird die Meldung in roter Farbe angezeigt.

1.     ajax_module.info.yml
name: Ajax Module
description: ‘Ajax module to validate username’
core: 8.x
type: module

2.     ajax_module.routing.yml

ajax_module.form
    path: '/admin/ajax_module’
defaults:
    _form: 'Drupal\ajax_module\Form\AjaxModuleForm'
    _title: 'Ajax Module’
requirements:
    _permission: 'access administration pages'

3.     src/Form/AjaxModuleForm.php

<?php
/**
 * @file
 * Contains Drupal\ajax_module\AjaxModuleForm
 */
namespace Drupal\ajax_module\Form;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ChangedCommand;
use Drupal\Core\Ajax\CssCommand;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class AjaxModuleForm extends FormBase {
  public function getFormId() {
	return 'ajax_module_form';
  }
  public function buildForm(array $form, FormStateInterface $form_state) {
	$form['user_name'] = array(
  	'#type' => 'textfield',
  	'#title' => 'Username',
  	'#description' => 'Please enter in a username',
  	'#ajax' => array(
    	// Function to call when event on form element triggered.
    	'callback' => 'Drupal\ajax_module\Form\AjaxModuleForm::usernameValidateCallback',
    	// Effect when replacing content. Options: 'none' (default), 'slide', 'fade'.
    	'effect' => 'fade',
    	// Javascript event to trigger Ajax. Currently for: 'onchange'.
    	'event' => 'change',
    	'progress' => array(
      	// Graphic shown to indicate ajax. Options: 'throbber' (default), 'bar'.
      	'type' => 'throbber',
      	// Message to show along progress graphic. Default: 'Please wait...'.
      	'message' => NULL,
    	),
  	),
	);
	return $form;
  }
 
  public function submitForm(array &$form, FormStateInterface $form_state) {
	drupal_set_message('Nothing Submitted. Just an Example.');
  }
 
  public function usernameValidateCallback(array &$form, FormStateInterface $form_state) {
	// Instantiate an AjaxResponse Object to return.
	$ajax_response = new AjaxResponse();
	
	// Check if Username exists and is not Anonymous User ('').
	if (user_load_by_name($form_state->getValue('user_name')) && $form_state->getValue('user_name') != false) {
  	$text = 'User Found';
  	$color = 'green';
	} else {
  	$text = 'No User Found';
  	$color = 'red';
	}
	
	// Add a command to execute on form, jQuery .html() replaces content between tags.
	// In this case, we replace the desription with wheter the username was found or not.
    $ajax_response->addCommand(new HtmlCommand('#edit-user-name--description', $text));
	
	// Add a command, InvokeCommand, which allows for custom jQuery commands.
	// In this case, we alter the color of the description.
    $ajax_response->addCommand(new InvokeCommand('#edit-user-name--description', 'css', array('color', $color)));
	
	// Return the AjaxResponse Object.
	return $ajax_response;
  }
}
 

Ich hoffe, das hat geholfen und die Luft über Ajax geklärt. Kontaktieren Sie uns unter [email protected] für eine detaillierte Version und viele solcher Einblicke!