[Javascript] 객체에 데이터 담아서 전달하기 (서버에서 Map으로 데이터 받기), 객체 리스트에 담아서 전달하기

 

서버와의 연동 작업을 진행하면서, 제일 중요하다고 생각하는 건 데이터를 어떤 식으로 주고 받을지가

제일 중요하다고 생각한다

 

이번 포스팅에서는 서버에 파라미터를 전송할 때, 객체에 데이터를 담아서

서버에서 Map이나 VO 객체를 통해 데이터를 받을 수 있도록 구현해 볼 예정이다

 

만약 객체를 리스트에 넣어서 데이터를 전송하게 되면 객체 리스트로도 데이터를 받을 수 있다

 

 

아래의 예제를 보자

 

---

1

객체를 파라미터로 전달하기

 

해당 예제는 객체를 생성해서 파라미터를 전달한다

 

obj 라는 오브젝트 타입의 변수를 선언 후, key값을 지정하고 데이터를 넣는다

 

ajax 내부의 data 항목에 obj를 넣어주면 되는데, 

브라우저에서 서버로 데이터를 전송하려고 하기 때문에, JSON.stringify를 사용해서 데이터 형식을 json으로 

변경해주면 된다

 

var obj =new Object();
        obj.id = $("#id").val();
        obj.name = $("#name").val();
        obj.number = $("#number").val();
        obj.email = $("#email").val();
        obj.desc = $("#desc").val();;
 
        $.ajax({
                url: "insert",
                type: "POST",
                dataType: "json",
                processData: true,
                contentType: "application/json; charset=UTF-8",
                data: JSON.stringify(obj),
                success: function(data) {
                    if (data == 1) {
                        alert("등록 성공");
                    } else {
                        alert("등록 실패!");
                    }
                }
            });

해당 형식으로 데이터를 보내게 되면 서버에서는 다음과 같이 데이터를 받을 수 있다

 

 

만약 브라우저에서 보낸 객체 형식과 같은 VO 객체를 생성해두었다면, 아래와 같이 VO로 데이터를 받을 수 있다

 

VO를 생성해서 개발하는게 아니라면 그냥 Map으로 데이터를 받으면 된다

@RequestMapping(value="insert", method = RequestMethod.POST)
    public @ResponseBody int insert(@RequestBody Map<String,Object> data) {
        return service.insert(data);
    }
 
@RequestMapping(value="insert", method = RequestMethod.POST)
    public @ResponseBody int insert(@RequestBody InsertVO insertVO) {
        return service.insert(data);
    }

 

---

 

2

객체를 리스트에 담아서 데이터를 전달하기

 

어려운 건없다

리스트라는 배열을 선언한 후, wrapper 클래스 내부의 data 클래스가 존재하고

data 클래스 내부의 li 태그를 순차적으로 돌면서 데이터를 obj 객체에 담는다

 

그리고 list 배열에 객체를 하나씩 담아주면 된다

 

 
var list = new Array();
 
 
var wrapper = $(".wrapper").children('.data');
 
$.each(wrapper,function(index,item){
    var obj =new Object();
        obj.id = $(".data"+index).children('li:eq(0)').val();
        obj.name = $(".data"+index).children('li:eq(1)').val();
        obj.number = $(".data"+index).children('li:eq(2)').val();
        obj.email = $(".data"+index).children('li:eq(3)').val();
        obj.desc = $(".data"+index).children('li:eq(4)').val();
 
   list.push(obj);
 
});
                $.ajax({
                url: "insert",
                type: "POST",
                dataType: "json",
                processData: true,
                contentType: "application/json; charset=UTF-8",
                data: JSON.stringify(list),
                success: function(data) {
                    if (data == 1) {
                        alert("등록 성공");
                    } else {
                        alert("등록 실패!");
                    }
                }
            });
 

 

아래는 데이터를 받는 형식이다

 

서버에서도 VO나 Map으로 받던 데이터를 List Map 으로 변경해서 받기만 해주면 된다

@RequestMapping(value="insert", method = RequestMethod.POST)
    public @ResponseBody int insert(@RequestBody List<Map<String,Object>> list) {
        return service.insert(data);
    }
 
@RequestMapping(value="insert", method = RequestMethod.POST)
    public @ResponseBody int insert(@RequestBody List<InsertVO> list) {
        return service.insert(data);
    }