JSP에서 동일한 칼럼에 여러 데이터 넣기 - list 형태 사용하기

우선 예시부터 보자면..

• 과목
• 점수

• 과목
• 점수

• 과목
• 점수

위와 같은 형태의 input들이 있다고 할 때..

동일한 칼럼에 모두 다른 데이터를 한 번에 집어넣어야 하는 상황이 생긴다.

예시)
    title="국어,영어,수학"
    score="90,88,90"

---

## 일반적으로 사용하는 방식

1. Controller로 보내기 전에 JSP에서 값을 분리하여 하나의 리스트씩 돌린다.
   • 즉, title에 a,b,c의 값이 들어갔다면
   • split을 사용하여 a / b / c로 각각 구분을 하고
   • for문을 사용하여 따로따로 Controller로 보낸다.
2. 그대로 값을 넘기고 Controller에서 처리를 한다.
   • 이 때에도 동일하게 split을 사용하는 게 일반적인 것 같다.

---

## 이번에 포스팅하려는 방식

• VO

@Getter
@Setter
@Alias("scVO")
public class ScVO {
	/* 과목 */
        private String subject;
        /* 점수 */
        private String score;

        /* JSP에서 사용할 List */
        private List<ScVO> scVOList;
}

• JSP
  • method :: POST 방식
  • url :: 등록할 수 있는 Controller mapping 주소로 
  • $("#dtfForm").serialize() :: form:form tag 내의 모든 값들을 data로 보낸다.
  • success :: 성공했을 경우
  • error :: 실패했을 경우

<form:form commandName="searchVO" name="dftForm" id="dftForm" method="post">
    <ul>
        <li><form:input path="scVOList[0].subject" id="subject" /></li>
        <li><form:input path="scVOList[0].score" id="score" /></li>
    </ul>
    <ul>
        <li><form:input path="scVOList[1].subject" id="subject" /></li>
        <li><form:input path="scVOList[1].score" id="score" /></li>
    </ul>
    <ul>
        <li><form:input path="scVOList[2].subject" id="subject" /></li>
        <li><form:input path="scVOList[2].score" id="score" /></li>
    </ul>
    
    <button id="btn_submit">저장하기</button>
</form>

<script>
<%-- jQuery 사용함 --%>
$("#btn_submit").on("click") {
	$.ajax({
    	  method: "POST"
        , url: "insert.do"
        , data: $("#dftForm").serialize()
        , success: function() {
        		alert("등록 성공");
          }, error: function() {
          		alert("등록 실패");
          }
    });
}
</script>

• Controller
  • Iterator를 사용하여 scVOList에서 반복해서 데이터를 insert하기
  • iterator.hasNext :: 쪼갠 데이터 중에서 다음 데이터가 있을 때까지만 반복문 실행

@Controller
public class ScController {
	@RequestMapping(value="insert.do", method=RequestMethod.POST)
        public String insert(@Valid ScVO scVO) {
            // iterator를 사용하여 JSP에서 넘겨준 데이터 반복해서 insert하기
            Iterator iterator = scVO.getScVOList().iterator();
            while(iterator.hasNext()) {
                ScVO scVO1 = (ScVO) iterator.next();
                scService.insert(scVO1);
            }
        }
}

• DB

<!-- insert하기 -->
<insert id="insert" parameterType="ScVO">
    INSERT INTO T_SCHOOL (
          SEQ
        , SUBJECT
        , SCORE
    ) VALUES (
          #{seq}
        , #{subject}
        , #{score}
    )
</insert>

---

성공 시 아래와 같은 형태로 DB에 저장됨.

 

seq	subject	score
1	국어	90
2	영어	88
3	수학	90