自适应表单的异步提交

通常，Web表单配置为同步提交。 当用户提交表单时，会将其重定向到确认页面，或在提交失败时，将重定向到错误页面。 然而，诸如单页应用程序等现代Web体验正在日益流行，其中网页保持静态，而客户端与服务器交互在后台进行。 您现在可以通过配置异步提交来提供此自适应表单体验。 在这种情况下，自适应表单的行为与单页应用程序类似，因为在服务器上验证提交的表单数据时表单不会重新加载或其URL不会更改。

阅读有关自适应表单异步提交的详细信息。

配置异步提交

为自适应表单配置异步提交：

1. 在自适应表单创作模式中，选择表单容器对象，然后点按以打开其属性。

2. 在​提交​属性部分，启用​使用异步提交。

3. 在​在提交​部分，选择以下选项之一，在成功提交表单时执行。

   • 重定向到URL:在提交表单时重定向到指定的URL或页面。您可以在​重定向URL/路径​字段中指定URL或浏览以选择页面的路径。
   • 显示消息:显示提交表单时的消息。您可以在“显示消息”选项下的文本字段中写入消息。 文本字段支持富文本格式。

4. 点按以保存属性。

异步提交的工作原理

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

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

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

服务器对提交成功事件的响应

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

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

成功提交表单时的服务器响应包括：

• 表单数据格式类型：XML或JSON
• XML或JSON格式的表单数据
• 已选择重定向到页面或显示消息的选项（如表单中所配置）
• 在表单中配置的页面URL或消息内容

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

服务器对提交错误的响应事件

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

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

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

提交表单时出错时的服务器响应包括：

• 错误、CAPTCHA失败或服务器端验证的原因
• 错误对象列表，包括验证失败字段的SOM表达式和相应的错误消息

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

使用规则覆盖默认处理函数

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

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

1. 在创作模式下打开自适应表单，选择任何表单对象，然后点按以打开规则编辑器。
2. 在表单对象树中选择​表单，然后点按​创建。
3. 从模式选择下拉菜单中选择​代码编辑器。
4. 在代码编辑器中，点按​编辑代码。 点按确认对话框上的​编辑。
5. 从​事件​下拉菜单中选择​成功提交​或​提交错误。
6. 为所选事件编写规则，然后点按​完成​以保存该规则。