Verwenden von Ajax -Formularen in Drupal 8

Key Takeaways

• Die AJAX-API von Drupal 8 ermöglicht sauberere, benutzerfreundliche Formulare, ohne dass JavaScript-Code erforderlich ist. Dies kann erreicht werden, indem ein Teil des Verhaltens der Form verabschiedet wird.
• Die E -Mail -Validierungslogik kann in einen AJAX -Rückruf verschoben werden, der die Validierung auslöst und eine Nachricht druckt, ohne dass die Einreichung von Formularen erforderlich ist. Dies ist ein gemeinsames Verhalten in Formen und dient als gute Übung zum Verständnis von Ajax in Drupal 8.
• Die AJAX -API ermöglicht die Anpassung des Formularverhaltens. Die AJAX -Rückrufmethode in der Formularklasse empfängt das Formular Array und Formularstatus, wodurch die Validierung durchgeführt und eine AJAX -Antwort mit mehreren Befehlen zurückgegeben wird. Abhängig vom Validierungsergebnis.
• ajax kann auch in Drupal 8 außerhalb von Formularen verwendet werden, z. B. das Hinzufügen der Anwendungs-Ajax-Klasse zu einem beliebigen Link. Auf diese Weise kann Drupal eine AJAX -Anforderung an die URL im HREF -Attribut erstellen

In diesem Artikel werde ich Ihnen eine saubere Möglichkeit zur Verwendung der Drupal 8 Ajax -API zeigen, ohne eine Zeile von JavaScript -Code zu schreiben. Zu diesem Zweck kehren wir in einem früheren Artikel auf das erste benutzerdefinierte Formular zurück, das wir für Drupal 8 erstellt haben, und

ajaxify einiges seines Verhaltens, um es benutzerfreundlicher zu machen.

Eine aktualisierte Version dieses Formulars finden Sie in diesem Repository unter dem Namen DemoForm (dem Demo -Modul). Der Code, den wir in diesem Artikel schreiben, finden Sie auch dort, jedoch in einer separaten Filiale namens Ajax. Ich empfehle Ihnen, das Repo zu klonen und das Modul in Ihrer Entwicklungsumgebung zu installieren, wenn Sie folgen möchten.

Demoform

Obwohl schlecht benannt, war die Demoform sehr hilfreich, um die Grundlagen des Schreibens einer benutzerdefinierten Form in Drupal 8 zu veranschaulichen. Es wird die Validierung, Konfiguration und die Verwendung der Form der Form der Form der Form der Form der Form im Allgemeinen veranschaulicht. Natürlich konzentriert es sich auf die Grundlagen und hat nichts Spektakuläres.

Wenn Sie sich erinnern oder den Code überprüfen, werden Sie feststellen, dass das Formular ein einzelnes Textfeld darstellt, das für das Sammeln einer E -Mail -Adresse als Konfiguration zu verantwortlich ist. Die Formularvalidierung ist verantwortlich dafür, dass die eingereichte E -Mail über ein .com -Ende verfügt (ein schlechter Versuch, dies jedoch ausreicht, um das Prinzip der Formularvalidierung zu veranschaulichen). Wenn ein Benutzer das Formular einreicht, speichert er eine neue E -Mail -Adresse in der Konfiguration und erhalten eine Bestätigungsnachricht auf dem Bildschirm.

In diesem Artikel verschieben wir die E -Mail -Validierungslogik in einen AJAX -Rückruf, sodass nach dem Eingeben der E -Mail -Adresse die Validierung automatisch ausgelöst und eine Nachricht gedruckt wird, ohne das Formular einzureichen. Auch hier hat dieses Verhalten nichts Spektakuläres und Sie werden es in Formen in freier Wildbahn ziemlich oft sehen (normalerweise um Benutzernamen zu validieren). Aber es ist eine gute Übung, um Ajax in Drupal 8 zu betrachten.

ajax Form

Das erste, was wir tun müssen, ist die E -Mail -Validierungslogik von der allgemeinen ValidesForm () auf eine Methode zu verschieben, die nur diesen Aspekt behandelt:

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

Wie Sie bemerken können, haben wir auch die Logik ein wenig geändert, um sicherzustellen, dass die E -Mail -Adresse mit einem .com endet.

Dann können wir diese Logik von der Hauptvalidierungsmethode verschieben, um sicherzustellen, dass unser vorhandenes Verhalten noch funktioniert:

<span>/**
</span><span> * <span>{@inheritdoc}
</span></span><span> */
</span><span>public function validateForm(array &$form, FormStateInterface $form_state) {
</span>  <span>// Validate email.
</span>  <span>if (!$this->validateEmail($form, $form_state)) {
</span>    <span>$form_state->setErrorByName('email', $this->t('This is not a .com email address.'));
</span>  <span>}
</span><span>}</span>

Auf diese Weise wird auch wenn unser Formular irgendwie eingereicht wird (programmatisch oder auf andere Weise), die Validierung wird dennoch ausgeführt.

Als nächstes müssen wir uns unserer Formulardefinition wenden, insbesondere an das E -Mail -Feld, und sie basierend auf einer Benutzerinteraktion AJAX -Anforderungen auslösen. Dies ist der Akt eines Benutzers, der den Wert des Feldes ändert und den Fokus daraus entzieht:

<span>$form['email'] = array(
</span>  <span>'#type' => 'email',
</span>  <span>'#title' => $this->t('Your .com email address.'),
</span>  <span>'#default_value' => $config->get('demo.email_address'),
</span>  <span>'#ajax' => [
</span>    <span>'callback' => array($this, 'validateEmailAjax'),
</span>    <span>'event' => 'change',
</span>    <span>'progress' => array(
</span>      <span>'type' => 'throbber',
</span>      <span>'message' => t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' => '<span ></span>'
</span><span>);</span>

Was wir hier neu gemacht haben, ist mit einigen der relevanten Schlüssel den #ajax -Schlüssel zum Array hinzuzufügen. Zusätzlich haben wir ein wenig Markup nach dem Formularelement als Wrapper für eine kurze Nachricht zur Gültigkeit der E -Mail hinzugefügt.

Der Rückruf im #Ajax -Array zeigt auf eine Methode in unserer Formklasse (valateMailajax ()), während das Ereignis eine JavaScript -Bindung an dieses Formularelement für das JQuery Change -Ereignis hinzufügt. Alternativ können Sie auch einen Pfadschlüssel anstelle eines Rückrufs angeben, aber in unserem Fall würde dies bedeuten, auch eine Route und einen Controller einzurichten, der überflüssig erscheint. Und wir möchten nicht den Wrapper -Schlüssel, da wir nicht beabsichtigen, einen Bereich mit zurückgegebenen Inhalten zu füllen, sondern die Aktionen, die sich aus dem Rückruf resultieren, zu grapieren. Dafür werden wir Ajax -Befehle verwenden.

Um mehr über all das zu erfahren, ermutige ich Sie, die AJAX -API -Seite oder den Formular -API -Eintrag für AJAX zu konsultieren. Es gibt eine Handvoll anderer Optionen, mit denen Sie das Ajax -Verhalten Ihrer Formelemente weiter anpassen können.

Jetzt ist es Zeit, die Rückrufmethode in unserer Formklasse zu schreiben. Dies empfängt das Objekt $ Formarray und $ form_state als Argumente aus dem Formular, das die AJAX -Anforderung ausgelöst hat:

<span>/**
</span><span> * Ajax callback to validate the email field.
</span><span> */
</span><span>public function validateEmailAjax(array &$form, FormStateInterface $form_state) {
</span>  <span>$valid = $this->validateEmail($form, $form_state);
</span>  <span>$response = new AjaxResponse();
</span>  <span>if ($valid) {
</span>    <span>$css = ['border' => '1px solid green'];
</span>    <span>$message = $this->t('Email ok.');
</span>  <span>}
</span>  <span>else {
</span>    <span>$css = ['border' => '1px solid red'];
</span>    <span>$message = $this->t('Email not valid.');
</span>  <span>}
</span>  <span>$response->addCommand(new CssCommand('#edit-email', $css));
</span>  <span>$response->addCommand(new HtmlCommand('.email-valid-message', $message));
</span>  <span>return $response;
</span><span>}</span>

Einfach in dieser Methode führen wir die Validierung durch und geben eine AJAX -Antwort mit mehreren Befehlen zurück, die je nach Validierungsergebnis abweichen. Mit dem CSSCommand wenden wir einige CSS direkt auf das E -Mail -Formularelement, während wir mit dem HTMLCommand den Inhalt des angegebenen Selektors ersetzen (erinnern Sie sich an das Suffix aus unserem Formularelement?).

Diese Befehle sind so ziemlich auf JQuery -Funktionen zugeordnet, sodass sie leicht zu verstehen sind. Auf dieser Seite finden Sie eine Liste aller verfügbaren Befehle. Und da wir drei neue Klassen innerhalb dieser Methode verwenden, müssen wir uns auch daran erinnern, sie oben zu verwenden:

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>

Und das ist ziemlich genau das. Wenn Sie den Cache löschen und Ihr Formular neu laden. Wenn Sie in das E -Mail -Feld eingeben und den Fokus entfernen, wird der Rückruf ausgelöst, um die E -Mail -Adresse zu validieren. Sie werden das dort kleine Posensymbol (das in der Definition geändert werden kann) und die kurze Nachricht, die wir definiert haben, festgestellt werden. A Richtig E -Mail -Adresse sollte das Feld in Grün hervorheben und die OK -Nachricht drucken, während im Gegenteil die Farbe rot mit einer entgegengesetzten Nachricht verwendet wird.

Wenn wir einen Wrapper in der Formularelementdefinition angegeben hätten, hätten wir einige Inhalte (oder das Render -Array) zurückgeben können, die in diesen Selektor platziert worden wären. Sie haben also die Möglichkeit, zwischen Rückgabe von Inhalten oder AJAX -Befehlen zu wählen, aber ich empfehle letztere für die meisten Fälle, da sie ein flexibleres (und konsistenteres) Verhalten bieten.

Schlussfolgerung

In diesem Artikel haben wir ein Beispiel für die Verwendung von AJAX zur Verbesserung unseres Formulars gesehen und es den Endbenutzern freundlicher machen. Und wir haben genau null Zeilen von JavaScript geschrieben, um dies zu erreichen.

In unserem Fall ist es wirklich eine Frage der Präferenz oder -Pancification . Wenn Sie jedoch mit einem Feldformular zu tun haben, das auf mehreren ähnlichen Feldern validiert wird, ist es wirklich sinnvoll, wenn Sie AJAX verwenden. Es ärgert die Benutzer nicht, das Formular einzureichen, um zu erkennen, dass ihre Eingabe ungültig ist.

Obwohl Formulare der Hauptbereich sind, in dem Sie Ajax in Drupal 8 sehen, können Sie ihn ein paar andere Möglichkeiten nutzen, ohne JavaScript zu schreiben.

Einmal netter Weg ist es, die Nutzungs-Ajax-Klasse zu einem beliebigen Link hinzuzufügen. Dadurch wird Drupal eine AJAX -Anfrage an die URL im HREF -Attribut erstellen, wenn der Link geklickt wird. Aus dem Rückruf können Sie AJAX -Befehle zurückgeben und nach Bedarf verschiedene Aktionen ausführen. Beachten Sie jedoch, dass JQuery und andere Kernskripte nicht auf allen Seiten für anonyme Benutzer geladen werden (daher wird Ajax anmutig auf regelmäßiges Verhaltensverhalten abgebaut). Stellen Sie also sicher, dass Sie diese Skripte für anonyme Benutzer einfügen, wenn Sie dieses Verhalten benötigen.

häufig gestellte Fragen zur Verwendung von AJAX in Drupal 8 Formularen

Wie kann ich AJAX in Drupal 8 -Formularen implementieren? Zunächst müssen Sie ein Formular definieren, das einen Ajax -Rückruf enthält. Dies kann in der Buildform -Methode des Formulars erfolgen. Die Eigenschaft "#ajax" sollte dem Formularelement hinzugefügt werden, das die AJAX -Anforderung auslöst. Diese Eigenschaft ist ein Array, das den Taste "Rückruf" enthält, der die Methode angibt, die aufgerufen werden soll, wenn das Formularelement ausgelöst wird. Die Rückrufmethode sollte ein AJAX -Antwortobjekt zurückgeben, das definiert, was auf der Seite aktualisiert werden soll.

Was sind AJAX -Callback -Befehle in Drupal 8? Diese Befehle sind PHP -Klassen, die das CommandInterface implementieren. Drupal 8 enthält mehrere integrierte AJAX-Befehle wie "Alarm", "Einfügen", "Entfernen" und "Ersetzen". Sie können auch benutzerdefinierte AJAX -Befehle erstellen, indem Sie eine neue Klasse erstellen, die das CommandInterface implementiert. Sie müssen eine neue Klasse erstellen, die das Befehlsinterface implementiert. Diese Klasse sollte eine Render -Methode definieren, die ein Array mit den folgenden Schlüssel zurückgibt: "Befehl", der Name des Befehls ist, und "Methode", die die Methode ist, die auf der Client -Seite aufgerufen werden soll. Das Array kann auch zusätzliche Daten enthalten, die an die clientseitige Methode übergeben werden.

Wie kann ich AJAX-Fehler in Drupal 8? Verwenden der Taste "Fehler" in der Eigenschaft "#ajax" des Formularelements. Dieser Schlüssel gibt eine Rückrufmethode an, die aufgerufen wird, wenn während der AJAX -Anforderung ein Fehler auftritt. Die Rückrufmethode sollte ein AJAX -Antwortobjekt zurückgeben, das definiert, wie der Fehler umgegangen wird.

Wie kann ich AJAX verwenden, um mehrere Elemente auf einer Seite in Drupal 8? Mehrere Elemente auf einer Seite in Drupal 8 können Sie mehrere Befehle im AJAX -Antwortobjekt zurückgeben. Jeder Befehl sollte das zu aktualisierende Element und die zu erschließende Aktion angeben. Die Befehle werden in der Reihenfolge ausgeführt, die sie dem Antwortobjekt hinzugefügt werden.

Wie kann ich Ajax verwenden, um ein Element auf einer Seite in Drupal 8? Element auf einer Seite in Drupal 8 können Sie den Befehl "Ersetzen" verwenden. Dieser Befehl erfordert zwei Argumente: den ausgewirkten Selektor des Elements und der neue Inhalt. Der Selektor kann ein gültiger jQuery -Selektor sein. Sie können den Befehl "entfernen" verwenden. Dieser Befehl erfordert ein Argument: Der Selektor des Elements soll entfernt werden. Der Selektor kann ein gültiger jQuery -Selektor sein.

Wie kann ich AJAX verwenden, um Inhalte in eine Seite in Drupal 8? kann den Befehl 'einfügen' verwenden. Dieser Befehl erfordert zwei Argumente: den Selektor des Elements, in dem der Inhalt eingefügt wird, und den neuen Inhalt. Der Inhalt kann vor, nach oder innerhalb des ausgewählten Elements eingefügt werden.

Wie kann ich AJAX verwenden, um eine Warnmeldung in Drupal 8? Dieser Befehl erfordert ein Argument: Die Meldung wird angezeigt. Die Nachricht kann eine gültige Zeichenfolge sein.

Wie kann ich AJAX verwenden, um in Drupal 8? Verwenden Sie den Befehl "Weiterleiten". Dieser Befehl erfordert ein Argument: die URL der Seite, um sie umzuleiten. Die URL kann jede gültige URL sein.

Das obige ist der detaillierte Inhalt vonVerwenden von Ajax -Formularen in Drupal 8. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!