Show Menu
主题×

自适应表单的异步提交

Web表单通常配置为同步提交。 用户提交表单时,会将其重定向到确认页面,如果提交失败,则会重定向到错误页面。 但是,诸如单页应用程序等现代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. 为选定事件编写规则,然后点按 完成 ,以保存该规则。