非同步提交最適化表單

傳統上,Web表格會設定為同步提交。 當使用者送出表格時,會將他們重新導向至確認頁面,或在提交失敗時,重新導向錯誤頁面。 不過,如單頁應用程式等現代化網頁體驗越來越受歡迎,而網頁會保持靜態,而主從式互動則會在背景進行。 您現在可以設定非同步提交,以提供此體驗的最適化表單。 在這種情況下,最適化表單的運作方式與單一頁面應用程式類似,因為當已提交的表單資料在伺服器上驗證時,表單不會重新載入或其URL不會變更。

閱讀相關資訊,以取得在最適化表單中非同步提交的詳細資訊。

配置非同步提交

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

  1. 在最適化表單製作模式中,選取「表單容器」物件並點選cmppr1以開啟其屬性。

  2. 在​Submission​屬性區段中,啟用​使用非同步提交

  3. 在​在提交​部分中,選擇以下選項之一以在成功提交表單時執行。

    • 重新導向至URL:重新導向至指定的URL或表單提交頁面。您可以在​重新導向URL/路徑​欄位中指定URL或瀏覽以選擇頁面的路徑。
    • 顯示消息:顯示表單提交的訊息。您可以在「顯示訊息」選項下方的文字欄位中寫入訊息。 文字欄位支援豐富式文字格式。
  4. 點選check-button1以儲存屬性。

非同步提交的運作方式

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. 在編寫模式中開啟最適化表單,選取任何表單物件,然後點選edit-rules1以開啟規則編輯器。
  2. 在「表單對象」樹中選擇「表單」,然後按一下「建立​」。
  3. 從模式選擇下拉式清單中選擇「代碼編輯器」。
  4. 在程式碼編輯器中,點選「編輯程式碼」。 ​在確認對話方塊上點選「編輯」
  5. 從​事件​下拉式清單中選擇​成功提交​或​提交錯誤
  6. 為所選事件編寫規則,然後點選​Done​以儲存規則。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now