在Drupal 8中使用AJAX表格

鑰匙要點

• > Drupal 8 Ajax API允許無需JavaScript代碼清潔，用戶友好的表單。這可以通過消除表格的某些行為來實現。
>
• >可以將電子郵件驗證邏輯移至AJAX回調，該回調觸發驗證並打印消息而無需提交表單。這是形式的常見行為，是理解Drupal 8中Ajax的良好練習。
ajax API允許自定義形式行為。表單類中的AJAX回調方法接收表單數組和表單狀態對象，執行驗證並根據驗證結果返回帶有多個命令的AJAX響應。 >
• ajax也可以在表單外部的drupal 8中使用，例如將use-ajax類添加到任何鏈接中。這允許Drupal在單擊鏈接時向HREF屬性中的URL提出AJAX請求，返回AJAX命令並根據需要執行各種操作。
在本文中，我將向您展示使用Drupal 8 Ajax API的干淨方法，而無需編寫一行JavaScript代碼。為此，我們將回到上一篇文章中為Drupal 8構建的第一個自定義表單，並
• ajaxify

它的某些行為，以使其更加用戶友好。

>該表格的更新版本可以在此存儲庫中以名稱DemoForm（演示模塊）找到。我們在本文中編寫的代碼也可以在此處找到，但在一個稱為Ajax的單獨分支中。我建議您克隆回購，並在開發環境中安裝模塊。

DemoForm

>儘管命名較差，但該模型在說明Drupal 8中編寫自定義表單的基礎方面非常有幫助。它處理驗證，配置並體現了通常的API的使用。當然，它專注於基礎知識，沒有任何壯觀的事情。

>如果您記得或檢查代碼，您會看到該表格顯示一個單一的文本字段，負責收集以保存為配置的電子郵件地址。表單驗證負責確保提交的電子郵件具有.com結尾（對此進行了不良嘗試，但足以說明表單驗證的原則）。因此，當用戶提交表單時，他們將新的電子郵件地址保存到配置中，並將確認消息打印到屏幕上。

在本文中，我們將將電子郵件驗證邏輯移至AJAX回調，以便在用戶完成鍵入電子郵件地址後，驗證將自動觸發，並在不提交表單的情況下打印了消息。同樣，這種行為沒有什麼壯觀的，您會經常以野外形式看到它（通常是為了驗證用戶名）。但這是在Drupal 8中查看Ajax的一個很好的練習。

>

ajax form

我們需要做的第一件事是將電子郵件驗證邏輯從一般validateForm（）移動到僅處理此方面的方法：

<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>

您可能會注意到，我們還對邏輯進行了一些更改，以確保電子郵件地址以.com

結束。 然後，我們可以從主要驗證方法中遵守此邏輯，以確保我們的現有行為仍然有效：

即使我們的表單以某種方式提交（通過程序或其他方式），

<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>

即使我們的表格仍將運行。

接下來，我們需要轉到我們的表單定義，特別是電子郵件字段，並根據用戶互動使其觸發Ajax請求。這將是用戶更改字段價值並從中刪除焦點的行為：>

我們在這裡做的新工作是用一些相關鍵向數組中添加#AJAX鍵。此外，我們在表單元素之後添加了一些標記，作為有關電子郵件有效性的簡短消息包裝器。

<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>

。

> #AJAX數組內部的回調指向我們的表單類（ValidateMailajax（））中的方法，而事件將javaScript綁定到此表單元素的jQuery Change事件中。另外，您還可以指定一個路徑密鑰，而不是回調，但是在我們的情況下，這意味著還必須設置一個似乎冗餘的路由和控制器。而且我們不希望包裝器密鑰，因為我們不打算填充帶有返回內容的區域，而是想詳細介紹回調所產生的操作。為此，我們將使用ajax命令。

要了解所有這些，我鼓勵您查閱AJAX API頁面或AJAX的表格API條目。您可以使用少數其他選項來進一步自定義表單元素的Ajax行為。

>

>現在是時候在我們的表單類中寫下回調方法了。這將接收$ form array和$ form_state對象，作為來自觸發ajax請求的表單的參數：>

簡單地說，在此方法中，我們執行驗證並返回帶有多個命令的AJAX響應，這些命令取決於驗證結果。使用CSSCommand，我們將一些CSS直接應用於電子郵件表單元素，而使用HTMLCommand，我們替換了指定的選擇器的內容（請記住我們的表單元素中的後綴嗎？）。

<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>

這些命令幾乎將其映射到jQuery函數，因此它們很容易掌握。您可以在此頁面上找到所有可用命令的列表。而且，由於我們在此方法中使用了三個新類，因此我們必須記住

在頂部使用：

<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>

>就是這樣。如果您清除緩存並重新加載表單，則輸入電子郵件字段並刪除焦點將觸發回調以驗證電子郵件地址。您會注意到那裡的小動物圖標（可以在定義中更改）以及我們定義的簡短消息。 a正確的電子郵件地址應以綠色突出顯示字段，並在相反的顏色紅色時打印出確定的消息。

如果我們在表單元素定義中指定了包裝器，我們本可以返回某些內容（或渲染數組），這些內容將放置在該選擇器內部。因此，您可以選擇在返回內容或AJAX命令之間進行選擇，但我建議在大多數情況下使用後者，因為它們提供了更靈活（且一致）的行為。

結論

在本文中，我們看到了使用Ajax改善我們的表單並使最終用戶更友好的示例。我們已經寫了零行的javaScript行以實現這一目標。

> 在我們的情況下，這確實是一個偏好或fancification

>表格是您在Drupal 8中看到Ajax的主要領域，但是您可以在不編寫JavaScript的情況下利用它的其他幾種方法。

>曾經是不錯的方法是在任何鏈接上添加使用ajax類。每當單擊鏈接時，這將在HREF屬性中向URL提出Drupal請求。從回調中，您可以返回AJAX命令並根據需要執行各種操作。但是請記住，jQuery和其他核心腳本並未在匿名用戶的所有頁面上加載（因此，Ajax將優雅地降低到常規鏈接行為）。因此，請確保如果需要此行為，請確保為匿名用戶包含這些腳本。 > 在Drupal 8表格中使用Ajax的常見問題

>如何在Drupal 8表格中實現Ajax？首先，您需要定義一個包含AJAX回調的表單。這可以通過表格的buildform方法完成。應將“ #AJAX”屬性添加到將觸發Ajax請求的表單元素中。該屬性是一個包括“回調”密鑰的數組，該數組指定觸發表單元素時要調用的方法。回調方法應返回一個ajax響應對象，該對象定義了頁面上應更新的內容。

>

如何在drupal 8？

中創建一個自定義AJAX命令來創建Drupal 8中的自定義AJAX命令，您需要創建一個實現CommandInterface的新類。該類應定義一種渲染方法，該方法返回帶有以下鍵的數組：“命令”，這是命令的名稱和“方法”，這是在客戶端端被調用的方法。該數組還可以包含將傳遞給客戶端方法的其他數據。

>

>我如何處理drupal 8？

>

處理drupal 8中的ajax錯誤使用表單元素的“ #AJAX”屬性中的“錯誤”密鑰。此密鑰指定了一種回調方法，如果在AJAX請求期間發生錯誤，該鍵將被調用。回調方法應返回一個定義如何處理錯誤的ajax響應對象。

>我如何使用ajax更新drupal 8？

的頁面上的多個元素Drupal 8中的頁面上的多個元素，您可以在AJAX響應對像中返回多個命令。每個命令應指定要更新的元素和要執行的操作。這些命令將以將它們添加到響應對象的順序中執行。

>

>我如何使用ajax替換drupal 8？

>

> Drupal 8中的頁面上的元素，您可以使用“替換”命令。此命令需要兩個參數：要替換元素的選擇器和新內容。選擇器可以是任何有效的jQuery選擇器。

>

我如何使用ajax從drupal 8？

中的頁面中刪除元素，您可以使用“刪除”命令。此命令需要一個參數：要刪除元素的選擇器。選擇器可以是任何有效的jQuery選擇器。

>

我如何使用ajax將內容插入drupal 8？

>

>使用ajax將內容插入Drupal 8中的頁面，您可以使用“插入”命令。此命令需要兩個參數：將插入內容的元素的選擇器和新內容。可以在所選元素之前，之後或內部插入內容。

>

>我如何使用Ajax在Drupal 8？

中顯示警報消息，使用Ajax在Drupal 8中顯示警報消息，您可以使用“警報”命令。此命令需要一個參數：要顯示消息。該消息可以是任何有效的字符串。

>如何使用Ajax重定向到Drupal 8中的其他頁面。使用“重定向”命令。此命令需要一個參數：重定向到頁面的URL。 URL可以是任何有效的URL。

以上是在Drupal 8中使用AJAX表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！