티스토리 뷰

AJAX로 list를 전달해본거 같은데

다시하려니... + VO에 list 객체를 선언하고 넘기려는 처음 본 상황이니...

역시나 또 해맸다

체크 된 값들을 전달하려면 리스트 or 배열로 넘겨야 할텐데 어찌해야할까


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var tempArray = $("input[name=checker]:checked").serializeArray();
    var param = {};
    var list = [];
 
    for(var i = 0; i < tempArray.length; i++){
 
        var obj = {};
 
        obj.tempList = tempArray[i].value;
        list.push(obj);
 
    }
 
    param.temp = list;
 
    return param;
cs


첫 줄에 .serializeArray()jQuery docs에 자세히 설명이 나와있다!

(자바스크립트에서 받아온 배열을 JSON string으로 바꿔줌)


param 객체는 여러 값들을 VO로 넘기기 위해서 선언

obj 객체의 tempList 안에 JSON 형태로 된 tempArray의 값들을 저장한다.

그리고 list 배열에 obj 객체를 저장

param 객체의 temp에 list 배열을 저장 끝!

이제 AJAX로 값을 전송만 하면 된다.


1
2
3
4
5
6
7
    $.ajax ({
        type: 'post',
        dataType: 'json',
        url: "/url/address",
        data: JSON.stringify(param),
        contentType : 'application/json',
        success:function(data) { ...
cs


JSON.stringify(param)으로 param을 다시 JSON객체를 string 형태로 변경

string으로 변경된 JSON 객체가 JSON인지 알려주기 위해서 contentType : 'application/json' 추가


Controller에서 받을 땐 @RequestBody로 해결!

(너무 돌아간거 같은데... 더 좋은 방법을 찾는다면 업데이트 하겠습니다ㅜㅜ)



----------------------------------------- 11.29 추가 -----------------------------------------


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function respChkList() {
 
    var chkArr = $("input[name=chk]:checked");
 
    var aValues = [];         
    var bValues = [];         
                
        chkArr.each(function(i){
 
            var td = $("#table tr:eq(" + chkArr[i].value + ")").children();
 
            aValues.push(td.siblings(".classA").val());
            bValues.push(td.siblings(".classB").text());
 
        });
        
    var param = {
 
                aArr : aValues,
                bArr : bValues
 
        }
 
         $.ajax ({
 
            type: 'post',
            url: "/url",
            data:param,
            success:function(data) {
                alert("성공!");
            },
cs

체크된 값들을 처리하려면 리스트로 보내야하는데 또 다른 방법이다.

배열에 체크된 값들을 담은 후, 객체에 배열을 담아서 ajax로 controller에 보낸다.


1
2
3
4
5
6
7
public Map<String, Object> process(
 
        @RequestParam(value="aArr[]") List<String> aArr,
        @RequestParam(value="bArr[]") List<String> bArr,
        HttpSession session) {
        ...
        }
cs

controller에서는 이런 식으로 받으면 끝!



댓글