Show Menu
主题×

自适应表单的异步提交

通常,Web表单配置为同步提交。 在同步提交中,用户提交表单时,会将其重定向到确认页、感谢页或提交失败时的错误页。 然而,诸如单页应用程序等现代Web体验正在日益流行,其中网页保持静态,而客户端与服务器交互在后台进行。 您现在可以通过配置异步提交来提供此自适应表单体验。
在异步提交中,当用户提交表单时,表单开发人员将插入一个单独的体验,如重定向到其他表单或网站的单独部分。 作者还可以插入单独的服务,如向其他数据存储发送数据或添加自定义分析引擎。在异步提交时,自适应表单的行为类似于单页应用程序,因为表单在服务器上验证提交的表单数据时不会重新加载或其URL不会更改。
阅读有关自适应表单异步提交的详细信息。

配置异步提交

为自适应表单配置异步提交:
  1. 在自适应表单创作模式中,选择表单容器对象,然 cmppr1以打开其属性。
  2. 在“提 交属性 ”部分,启用 使用异步提交
  3. 在“提交 ”部分,选择以下选项之一,以在成功提交表单时执行。
    • 重定向到URL : 在提交表单时重定向到指定的URL或页面。 您可以指定URL或浏览以在“重定向URL/路径”字段中选 择页面的路径
    • 显示消息 : 显示提交表单时的消息。 您可以在“显示消息”选项下的文本字段中写入消息。 文本字段支持富文本格式。
  4. 1以保存属性。

异步提交的工作方式

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. 为选定事件编写规则,然后点 按完 ,以保存规则。