[Java] Array 배열 Controller VO로 받기 파싱

---

자바를 이용하면서 MVC패턴을 통해 Controller에서 데이터를 주고받는일이 있다. 기존 JSP에서는

<tbody>
	<tr>
		<th>제목</th>
        <td class="title" id="title">${testVO.title}</td>
		<th>내용</th>
        <td class="content" id="content">${testVO.content}</td>
	</tr>
	<tr>
		<th>이름</th>
        <td class="name" id="name">${testVO.name}</td>
		<th>번호</th>
        <td class="bno" id="bno">${testVO.bno}</td>
	</tr>
</tbody>

이러한 형태로 데이터를 주고 받으면서 조회, 수정, 삭제 기능을 수행었는데, 같은 기능을 다른 방법으로 시도해보고 있었다. JSP에서 다른 JSP에서 화면이동 할 필요 없이

1개의 페이지에서 ajax를 이용하여 데이터의 정보를 조회나 수정을 하고싶었다. 쉽게 말하자면 댓글 기능과 비슷하다고도 볼 수 있다.

ajax로 데이터 처리를 하고 $.each(result, function(index, view) 의 패턴으로 Controller에서 데이터를 잘 가지고와서 Web 화면에 원하는 값을 출력 할 수가 있었다.

 

이제 출력한 값들을 배열에 담아서 다시 Contoller로 가지고와서 VO값을 수정하는걸 시도해보려고 한다.

먼저 해야할것은 보내줄 데이터들을 배열에 담아주는 것.

var btn = $('#btn').val();
    	  var updateValues = [];
    	  $("input[id='btn'], input[name='update']:text").each(function(i) {
    		  updateValues.push($(this).val());
    	    });

html에서 설정한 #btn은 '저장' 기능인데, 이것을 실행하면, name을 update로 지정한 값들이 초기화한 배열 updateValues에 push를 이용하여 차례대로 담기도록 했다.

 

var updateArray = {["title" : updateValues[0], "content" : updateValues[1]}

대략 이런식으로 담겨 있다고 가정해보았다.

그런다음 이제 ajax를 이용하여 Controller에 값을 보내준다.

$.ajax({
	url : '/infoupdate.json', //요청 url 의미
	method : 'POST',	//데이터 전송방식
	data : JSON.stringify(updateArray),	//서버로 데이터를 전송할 때 사용 "name="+name 이런 형태로
	dataType : 'json',	//서버에서 받아올 데이터를 어떤 형태로 해석 할것인가? xml, json, html, script중 선택
	contentType : 'application/json; charset=UTF-8',
	traditional : true,
	success : function(data) {
		alert("수정 완료되었습니다.");
		},
	error : function(xhr,status,error) {
		alert("양식을 다시 확인해주세요."); //실패시 처리
	}
		});

data의 형식 JSON을 JOSN.stringify(updateArray) 로 보내줘야하며, contentType도 application/json;의 형식으로 변경을 해준다.

 

이제 그럼 Controller 로 한 번 보내줘볼까?

@ResponseBody
@RequestMapping(value = "/infoupdate.json", method = RequestMethod.POST)
public String update(HttpServletRequest request, @RequestBody TestVO testVO) throws Exception {
		
		testService.update(testVO);
        
	return "redirect:/infoview.json?val="testVO.getBno();
}

POST전송은 주로 수정하기나 form에 많이 사용되고 있다고한다. 데이터를 주고 받기 위해선 @ResponseBody와 @RequestBody가 필요하며, ajax로 보내준 배열 데이터를 TestVO testVO로 파싱을 해준다.

@ModelAttribute TestVO testVO 로도 파싱이 가능하다고 한다.

 

testService는 따로 구성한 Service이며 update를 통해서 testVO값을 적용한후 return값을 실행해준다.

 

이 과정에서 내가 실수한 부분을 언급하고자한다.

처음시도했을때 자꾸 POST전송 404에러가 나와서 경로문제인가 계속 살펴봤는데, 경로가 아닌 파싱의 문제였다. 어떤 문제였냐면 초기 배열 설정을 잘못해주었다.

 

앞선 언급했던 자바스크립트에서 배열을 담아줄때, 

var btn = $('#btn').val();
    	  var updateValues = [];
    	  $("input[id='btn'], input[name='update']:text").each(function(i) {
    		  updateValues.push($(this).val());
    	    });

이후 var updateArray = {"updateArray" : updateValues};로 선언을 했었다. 이렇게 설정을 해버리면

updateArray라는 이름을 가진 배열 안에 [ 'title값', 'content'] 값이 들어있어서 해당 VO가 이것들을 받을때 변수명과 일치하지 않아 파싱이 되지 않는것이었다.

 

그래서 var updateArray = {["title" : updateValues[0], "content" : updateValues[1]} 의 형태로 Key와 Value처럼 구성이 되게끔 VO의 변수명과 값을 일치시켜 배열을 다시 저장했다.

배열에서 보내준 이름과 VO가 받는 변수명이 일치하다보니 더 이상 값은 404에러 혹은 Null로 나오지 않고, 내가 원하는 값을 통해 수정하기 기능을 완벽하게 구현 할 수 있었다.

 

배열이 값이 많아지면 var updateArray양도 많아지게 될텐데, 뭔가 자연스럽게 "" : Array[0] 으로 저장되는 기능은 없으려나? 한 번 찾아봐야겠다.