배열 형태로 데이터 submit 하기

학원의 3번째 프로젝트에서

1 : n 관계의 데이터를 insert 하기위해서 form 태그를 submit 했을 때 여러개의 데이터가 배열 형태로 Model에 저장되도록 만들고싶었다.

 

부모가 되는 모델이 다음과 같고

자식이 되는(List 형태로 받을) 모델이 다음과 같다.

 

컨트롤러에서는 AdminOrderVO 로 받을 경우, OrderedProductVO 를 list 형태로 받아오려면 어떻게 해야할지 고민해봤다.

 

jsp

jsp에는 다음과 같이 form 태그와, AdminOrderVO 의 기본 필드 중 하나인 deliveryDate 를 미리 생성해뒀다.

 

javaScript

스크립트에서는 버튼을 누를 경우 OrderedProductVO 내부에 값을 넣을 수 있도록 input이 생성되도록 만들었는데,

input의 name 속성을 orderedProduct[ ].product 로 생성했고, 이 input에 담긴 값이 OrderedProductVO 의 product 필드에 저장되는 것을 기대했다.

 

그리고 OrderedProductVO AdminOrderVO에 List 형태로 선언되어 있기 때문에,

각 input을 구분할 수 있는 index를 만들기 위해서

전역에 index를 선언하고 클릭 이벤트의 마지막에 index 값을 추가해 줬다.

-> 이 기능을 역으로 이용해서 input을 삭제하는 버튼도 만들 수 있을 것이다.

 

기능 사용해보기

'추가' 버튼을 클릭해서 orderProduct[ ].product name을 가지는 input을 여러개 생성하고

각 input에 프로덕트 1~5 까지의 value를 넣어줬다.

 

이 form태그를 submit 하면,

컨틀롤러에서 AdminOrderVO 의 데이터를 다음과 같이 확인할 수 있다.

기본 필드였던 deliveryDate에 '딜리버리데이트' 가 정상적으로 들어갔고

orderedProduct 변수에는 OrderedProductVO 가 배열 형태로 5개 생성됬고
각 OrderedProductVO 의 product에 알맞은 값들이 저장되었다.

 

 

이제는 mybatis에서 insert all 과 for 문을 사용해서

한 번의 insert로 여러개의 테이블에, 여러번의 insert를 할 예정이다.