非同步提交自適應Forms

傳統上，Web表單配置為同步提交。 在同步提交中，當用戶提交表單時，會將他們重定向到確認頁、感謝頁，或在提交失敗時，重定向到錯誤頁。 然而，單頁應用程式等現代Web體驗越來越受歡迎，在後台進行客戶端與伺服器交互時，網頁保持靜態。 您可以配置非同步提交，以便通過Adaptive Forms提供此體驗。

在非同步提交中，當用戶提交表單時，表單開發人員將插入單獨的體驗，例如重定向到網站的其他表單或單獨的部分。 作者還可以插入單獨的服務，如將資料發送到不同的資料儲存或添加自定義分析引擎。 在非同步提交時，Adaptive Form的行為與單頁應用程式類似，因為在伺服器上驗證提交的表單資料時，表單不會重新載入或其URL不會更改。

有關Adaptive Forms中非同步提交的詳細資訊，請閱讀。

配置非同步提交

要配置自適應表單的非同步提交，請執行以下操作：

1. 在自適應表單創作模式中，選擇「表單容器」對象，然後點擊 開啟其屬性。

2. 在 提交 屬性部分，啟用 使用非同步提交。

3. 在 提交時 部分，選擇要在成功提交表單時執行的以下選項之一。

   • 重定向至URL:重定向到表單提交時指定的URL或頁面。 可以指定URL或瀏覽以在 重定向URL/路徑 的子菜單。
   • 顯示消息:顯示表單提交消息。 您可以在以下文本欄位中寫入消息 顯示消息 的雙曲餘切值。 文本欄位支援富格文本格式。

4. 點擊 的子菜單。

非同步提交的工作原理

Experience Manager Forms 為表單提交提供開箱即用的成功和錯誤處理程式。 處理程式是基於伺服器響應執行的客戶端函式。 當提交表單時，資料被傳輸到伺服器以進行驗證，伺服器返回對客戶端的響應，其中包含有關提交的成功或錯誤事件的資訊。 資訊作為參數傳遞給相關處理程式以執行該函式。

此外，表單作者和開發人員可以在表單級別編寫規則以覆蓋預設處理程式。 有關詳細資訊，請參見 使用規則覆蓋預設處理程式。

讓我們首先查看伺服器對成功和錯誤事件的響應。

伺服器對提交成功事件的響應

伺服器對提交成功事件的響應的結構如下：

{oneOf: [
{  properties : {
     contentType : {"type" : "string",  "enum" : ["xmlschema", "jsonschema"]},
    data : {type : "string", description : "Form data in XML or  JSON  format"},
   thankYouOption : {type : "string"}
   }},
  properties : {
     contentType : {"type" : "string",  "enum" : ["xmlschema", "jsonschema"]},
    data : {type : "string", description : "Form data in XML or  JSON  format"},
   thankYouContent: {type: "string"}
   }
]

}

成功提交表單時的伺服器響應包括：

• 表單資料格式類型：XML或JSON
• XML或JSON格式的表單資料
• 選擇的選項可重定向到頁面或顯示在窗體中配置的消息
• 在表單中配置的頁面URL或消息內容

成功處理器讀取伺服器響應並相應地重定向到所配置的頁面URL或顯示消息。

伺服器對提交錯誤事件的響應

伺服器對提交錯誤事件的響應的結構如下：

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

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

在提交表單時出錯時，伺服器響應包括：

• 錯誤原因、驗證碼或伺服器端驗證失敗
• 錯誤對象清單，包括驗證失敗的欄位的SOM表達式和相應的錯誤消息

錯誤處理程式讀取伺服器響應，並相應地在表單上顯示錯誤消息。

使用規則覆蓋預設處理程式

表單開發人員和作者可以在表單級別編寫規則以覆蓋預設處理程式。 成功和錯誤事件的伺服器響應在窗體級別公開，開發人員可以使用 $event.data 在規則中。

執行以下步驟來編寫規則以處理成功和錯誤事件。

1. 在創作模式下開啟「自適應表單」，選擇任何表單對象，然後點擊 開啟規則編輯器。

2. 選擇 窗體 在「表單對象」樹中按一下 建立。

3. 選擇 已成功提交 或 提交 從 選擇狀態 的子菜單。

4. 定義 然後 選定狀態的操作。 例如，選擇 導航至 然後鍵入或貼上URL。 也可以使用 函式 頁籤

   

5. 點擊 完成 來保存規則。