jQuery에서 Ajax로 배열 전송하기



jQuery Ajax에서 배열 파라미터를 서버로 전송할 때 전통적인 방식을 사용해야 합니다.



문제 상황


기본 jQuery Ajax는 배열을 ids[]=1&ids[]=2 형식으로 전송하는데, Spring 등 일부 백엔드에서는 이를 인식하지 못합니다.



해결 방법


// 전역 설정
$.ajaxSettings.traditional = true;

// 또는 개별 요청에서 설정
$.ajax({
    url: "/api/items",
    type: "POST",
    traditional: true,  // 핵심 옵션
    data: {
        ids: [1, 2, 3, 4, 5]
    },
    success: function(response) {
        console.log(response);
    }
});


traditional 옵션 차이


// traditional: false (기본값)
// 전송 형식: ids[]=1&ids[]=2&ids[]=3

// traditional: true
// 전송 형식: ids=1&ids=2&ids=3


다양한 전송 방법


// 방법 1: JSON으로 전송
$.ajax({
    url: "/api/items",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({ids: [1, 2, 3]}),
    success: function(response) {}
});

// 방법 2: param 메서드 사용
var data = $.param({ids: [1, 2, 3]}, true);
$.post("/api/items", data);

// 방법 3: 문자열로 직접 조합
var ids = [1, 2, 3];
var params = ids.map(id => "ids=" + id).join("&");
$.post("/api/items?" + params);


Spring Controller에서 받기


@RequestMapping("/api/items")
public void getItems(@RequestParam("ids") List ids) {
    // ids: [1, 2, 3]
}

// 또는
@RequestMapping("/api/items")
public void getItems(@RequestParam("ids") int[] ids) {
    // ids: [1, 2, 3]
}