异步提交自适应表单 asynchronous-submission-of-adaptive-forms

Adobe 建议使用现代、可扩展的数据捕获核心组件，以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进，确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。

传统上，Web窗体配置为同步提交。 在同步提交中，当用户提交表单时，他们将被重定向到确认页面、感谢页面，或者如果提交失败，则被重定向到错误页面。 但是，单页应用程序等现代Web体验越来越受欢迎，这是因为在后台进行客户端 — 服务器交互时，网页保持静态。 现在，您可以通过配置异步提交为自适应表单提供此体验。

在异步提交中，当用户提交表单时，表单开发人员会插入单独的体验，例如重定向到网站的其他表单或单独的部分。 作者还可以插入单独的服务（如将数据发送到不同的数据存储）或添加自定义分析引擎。 如果是异步提交，则自适应表单的行为与单页应用程序类似，因为当在服务器上验证提交的表单数据时，表单不会重新加载或其URL不会更改。

请阅读以了解有关自适应表单中异步提交的详细信息。

配置异步提交 configure

要为自适应表单配置异步提交，请执行以下操作：

异步提交的工作方式 how-asynchronous-submission-works

AEM Forms 为表单提交提供现成的成功和错误处理程序。处理程序是根据服务器响应执行的客户端函数。在提交表单时，数据被传输到服务器进行验证，服务器将响应返回到客户端，其中包含有关提交的成功或错误事件的信息。 信息将作为参数传递给相关处理程序以执行函数。

此外，表单作者和开发人员可以在表单级别编写规则以覆盖默认处理程序。 有关详细信息，请参阅使用规则覆盖默认处理程序。

让我们首先查看服务器响应中的成功和错误事件。

提交成功事件的服务器响应 server-response-for-submission-success-event

针对提交成功事件的服务器响应的结构如下所示：

{
  contentType : "<xmlschema or jsonschema>",
  data : "<dataXML or dataJson>" ,
  thankYouOption : <page/message>,
  thankYouContent : "<thank you page url/thank you message>"
}

如果表单提交成功，则服务器响应包括：

成功处理程序读取服务器响应，并相应地重定向到配置的页面URL或显示消息。

提交错误事件的服务器响应 server-response-for-submission-error-event

针对提交错误事件的服务器响应的结构如下所示：

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

   errors : [
               { "somExpression" : "<SOM Expression>",
                 "errorMessage"  : "<Error Message>"
               },
               ...
             ]
 }

如果表单提交中存在错误，则服务器响应包括：

错误处理程序会读取服务器响应，并在表单上显示相应的错误消息。

使用规则覆盖默认处理程序 custom

表单开发人员和作者可以在代码编辑器中在表单级别编写规则以覆盖默认处理程序。 成功和错误事件的服务器响应在表单级别公开，开发人员可以在规则中使用$event.data访问该级别。

执行以下步骤以在代码编辑器中编写规则以处理成功和错误事件。