版本 | 文章連結 |
---|---|
AEM 6.5 | 按一下這裡 |
AEM as a Cloud Service | 本文章 |
傳統上,網路表單會設定為同步提交。 在同步提交中,當使用者提交表單時,系統會將他們重新導向至認可頁面、感謝頁面,或在提交失敗的情況下重新導向至錯誤頁面。 不過,單頁應用程式等現代網頁體驗越來越受歡迎,這是因為網頁會維持靜態,而使用者端與伺服器之間的互動會在背景進行。 您可以設定非同步提交,透過Adaptive Forms提供此體驗。
在非同步提交中,當使用者提交表單時,表單開發人員會插入單獨的體驗,例如重新導向到其他表單或網站的單獨區段。 作者也可以外掛個別的服務,例如傳送資料至不同的資料存放區,或新增自訂分析引擎。 在非同步提交的情況下,最適化表單的行為就像單頁應用程式,因為當在伺服器上驗證提交的表單資料時,表單不會重新載入或其URL不會變更。
請閱讀下文,瞭解最適化Forms中非同步提交的詳細資訊。
若要設定最適化表單的非同步提交:
在調適型表單製作模式中,選取「表單容器」物件,然後點選 以開啟其屬性。
在 提交 屬性區段,啟用 使用非同步提交.
在 提交時 區段,選取下列其中一個選項以在成功提交表單時執行。
點選 以儲存屬性。
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"}
}
]
}
如果表單提交成功,伺服器回應會包括:
成功處理常式會讀取伺服器回應,並據以重新導向至設定的頁面URL或顯示訊息。
提交錯誤事件的伺服器回應結構如下:
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
表單提交中發生錯誤時的伺服器回應包括:
錯誤處理常式會讀取伺服器回應,並在表單上顯示錯誤訊息。
表單開發人員和作者可以在表單層級撰寫規則以覆寫預設處理常式。 成功和錯誤事件的伺服器回應會公開於表單層級,開發人員可使用進行存取 $event.data
在規則中。
執行以下步驟來撰寫規則以處理成功和錯誤事件。
在撰寫模式中開啟調適型表單,選取任何表單物件,然後點選 以開啟規則編輯器。
選取 表單 在「表單物件」樹狀結構中,點選 建立.
選擇 已成功提交 或 提交失敗 從 選取狀態 下拉式清單。
定義 則 所選狀態的動作。 例如,選取 瀏覽至 然後輸入或貼上URL。 您也可以使用 函式 標籤移至規則。
點選 完成 以儲存規則。