일반적으로 웹 양식은 동기적으로 전송하도록 구성됩니다. 사용자가 양식을 제출하면 확인 페이지로 리디렉션되거나 제출 시 오류 페이지가 표시됩니다. 그러나 클라이언트-서버 상호 작용이 백그라운드에서 발생하는 동안 웹 페이지가 정적인 상태로 유지되는 단일 페이지 애플리케이션과 같은 최신 웹 경험이 인기를 얻고 있습니다. 이제 비동기 제출을 구성하여 적응형 양식을 이 환경에 제공할 수 있습니다. 이 경우 적응형 양식은 양식을 다시 로드하지 않거나 제출된 양식 데이터를 서버에서 확인할 때 해당 URL이 변경되지 않으므로 단일 페이지 애플리케이션처럼 동작합니다.
적응형 양식의 비동기 제출에 대한 자세한 내용은 을 참조하십시오.
적응형 양식의 비동기 제출을 구성하려면:
적응형 양식 작성 모드에서 양식 컨테이너 개체를 선택하고 을 눌러 속성을 엽니다.
제출 속성 섹션에서 비동기 제출 사용을 활성화합니다.
제출 섹션에서 다음 옵션 중 하나를 선택하여 양식 제출 성공 시 수행합니다.
속성을 저장하려면 을 누릅니다.
AEM Forms은 양식 제출 시 즉시 사용할 수 있는 성공 및 오류 핸들러를 제공합니다. 핸들러는 서버 응답을 기반으로 실행하는 클라이언트측 함수입니다. 양식이 제출되면 데이터가 유효성 검사를 위해 서버로 전송되며, 이는 제출 시 성공 또는 오류 이벤트에 대한 정보와 함께 클라이언트에 대한 응답을 반환합니다. 이 정보는 관련 핸들러에 매개 변수로 전달되어 함수를 실행합니다.
또한 양식 작성자와 개발자는 양식 수준에서 규칙을 작성하여 기본 핸들러를 재정의할 수 있습니다. 자세한 내용은 규칙을 사용하여 기본 핸들러 재정의를 참조하십시오.
먼저 성공 및 오류 이벤트에 대한 서버 응답을 검토할 수 있습니다.
제출 성공 이벤트에 대한 서버 응답의 구조는 다음과 같습니다.
{
contentType : "<xmlschema or jsonschema>",
data : "<dataXML or dataJson>" ,
thankYouOption : <page/message>,
thankYouContent : "<thank you page url/thank you message>"
}
성공적인 양식 제출의 서버 응답에는 다음이 포함됩니다.
성공 핸들러는 서버 응답을 읽고 그에 따라 구성된 페이지 URL로 리디렉션하거나 메시지를 표시합니다.
제출 오류 이벤트에 대한 서버 응답의 구조는 다음과 같습니다.
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
양식 제출 시 오류가 발생하는 경우 서버 응답에는 다음이 포함됩니다.
오류 핸들러는 서버 응답을 읽고 이에 따라 양식에 오류 메시지를 표시합니다.
양식 개발자와 작성자는 코드 편집기에서 기본 핸들러를 재정의하기 위해 양식 수준에서 규칙을 작성할 수 있습니다. 성공 및 오류 이벤트에 대한 서버 응답이 양식 수준에서 노출되며, 이 양식 수준에서는 개발자가 규칙에서 $event.data
을 사용하여 액세스할 수 있습니다.
성공 및 오류 이벤트를 처리하기 위해 코드 편집기에서 규칙을 작성하려면 다음 단계를 수행하십시오.