jQuery .serialize() 를 이용한 ajax Form Submit

Spring 기반으로 백-엔드를 개발 중에 프론트 자바스크립트에서 ajax방식의 요청으로 form에 있는 정보를 넘겨야하는 경우가 있어 정리해두기로 했습니다.

1. HTML

폼과 전송을 위한 컨트롤과 Submit버튼을 만듭니다.

2. JS 

다음은 Form Submit을 위한 버튼 메소드를 정의를 합니다.

여기서는 요청 URL로의 POST ajax방식의 요청을 하려고 합니다.

이번 주제의 핵심은 바로 요놈

serialize() 입니다.

123

 출처 ; https://api.jquery.com/serialize/

위에 설명된 그대로 serialize()는 form요소(컨트롤)들의 값을 한번에 url parameter 형식 텍스트 문자열로로 변환 해줍니다.

위의 예제에서는 표준형태의 쿼리스트링을  만들고, 요청 URL에 요청을 하게 되겠내요.

“UserID=HEMA30&BookID=uuid:35aeb750-ee9f-4813-be49-c43a0df68475”

대상 요소로는 <input>, <textarea>, <select> 등이 된다고 합니다.

3. Servlet or Controller

HTML에서 요청한 요청 파라미터를 받는 방법은 다들 아시다시피 아래와 같이 받으시면 됩니다.

You may also like...

  • 아이고

    감사합니다!