在Drupal 8中使用AJAX表格-php教程-PHP中文网

钥匙要点

ajax form

如何在drupal 8？

中创建一个自定义AJAX命令来创建Drupal 8中的自定义AJAX命令，您需要创建一个实现CommandInterface的新类。该类应定义一种渲染方法，该方法返回带有以下键的数组：“命令”，这是命令的名称和“方法”，这是在客户端端被调用的方法。该数组还可以包含将传递给客户端方法的其他数据。

>

的页面上的多个元素Drupal 8中的页面上的多个元素，您可以在AJAX响应对象中返回多个命令。每个命令应指定要更新的元素和要执行的操作。这些命令将以将它们添加到响应对象的顺序中执行。

> Drupal 8中的页面上的元素，您可以使用“替换”命令。此命令需要两个参数：要替换元素的选择器和新内容。选择器可以是任何有效的jQuery选择器。

>使用ajax将内容插入Drupal 8中的页面，您可以使用“插入”命令。此命令需要两个参数：将插入内容的元素的选择器和新内容。可以在所选元素之前，之后或内部插入内容。

>我如何使用Ajax在Drupal 8？

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

首页

后端开发

php教程

在Drupal 8中使用AJAX表格

Feb 17, 2025 pm 12:53 PM

在Drupal 8中使用AJAX表格

钥匙要点

> Drupal 8 Ajax API允许无需JavaScript代码清洁，用户友好的表单。这可以通过消除表格的某些行为来实现。
>可以将电子邮件验证逻辑移至AJAX回调，该回调触发验证并打印消息而无需提交表单。这是形式的常见行为，是理解Drupal 8中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 &amp;$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state-&gt;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 &amp;$form, FormStateInterface $form_state) {
</span>  <span>// Validate email.
</span>  <span>if (!$this-&gt;validateEmail($form, $form_state)) {
</span>    <span>$form_state-&gt;setErrorByName('email', $this-&gt;t('This is not a .com email address.'));
</span>  <span>}
</span><span>}</span>

登录后复制

即使我们的表格仍将运行。

接下来，我们需要转到我们的表单定义，特别是电子邮件字段，并根据用户互动使其触发Ajax请求。这将是用户更改字段价值并从中删除焦点的行为：>

我们在这里做的新工作是用一些相关键向数组中添加#AJAX键。此外，我们在表单元素之后添加了一些标记，作为有关电子邮件有效性的简短消息包装器。

<span>$form['email'] = array(
</span>  <span>'#type' =&gt; 'email',
</span>  <span>'#title' =&gt; $this-&gt;t('Your .com email address.'),
</span>  <span>'#default_value' =&gt; $config-&gt;get('demo.email_address'),
</span>  <span>'#ajax' =&gt; [
</span>    <span>'callback' =&gt; array($this, 'validateEmailAjax'),
</span>    <span>'event' =&gt; 'change',
</span>    <span>'progress' =&gt; array(
</span>      <span>'type' =&gt; 'throbber',
</span>      <span>'message' =&gt; t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' =&gt; '&lt;span &gt;&lt;/span&gt;'
</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 &amp;$form, FormStateInterface $form_state) {
</span>  <span>$valid = $this-&gt;validateEmail($form, $form_state);
</span>  <span>$response = new AjaxResponse();
</span>  <span>if ($valid) {
</span>    <span>$css = ['border' =&gt; '1px solid green'];
</span>    <span>$message = $this-&gt;t('Email ok.');
</span>  <span>}
</span>  <span>else {
</span>    <span>$css = ['border' =&gt; '1px solid red'];
</span>    <span>$message = $this-&gt;t('Email not valid.');
</span>  <span>}
</span>  <span>$response-&gt;addCommand(new CssCommand('#edit-email', $css));
</span>  <span>$response-&gt;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 &amp;$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state-&gt;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响应对象，该对象定义了页面上应更新的内容。