[Spring] Ajax를 이용해 데이터를 서버로 보내는 몇 가지 방법

 

1. 배열 전송하기

Client
Method : POST
Content-type : application/x-www-form-urlencoded; charset=UTF-8

    $.ajax({
        url: "/test",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        type: "post",
        data: {ids : [1,2,3]},
        success: function (res) {
        },
        error: function (request, status, error) {
        }
    });

Server

    @PostMapping(value = "/test")
    @ResponseBody
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void test(
            @RequestParam(name = "ids[]", required = false) List<Integer> ids
    ) {
        logger.info("ids : {}", ids);
    }

---

2. 배열 전송하기(JSON)

Client
Method : POST
Content-type : application/json; charset=UTF-8

    $.ajax({
        url: "/test",
        dataType: "json",
        contentType: "application/json; charset=UTF-8",
        type: "post",
        data: JSON.stringify([1, 2, 3]),
        success: function (res) {
        },
        error: function (request, status, error) {
        }
    });

Server

    @PostMapping(value = "/test")
    @ResponseBody
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void test(
            @RequestBody(required = false) List<Integer> ids
    ) {
        logger.info("ids : {}", ids);
    }

---

3. 배열과 데이터 전송하기(JSON)

Client
Method : POST
Content-type : application/json; charset=UTF-8

    $.ajax({
        url: "/test",
        dataType: "json",
        contentType: "application/json; charset=UTF-8",
        type: "post",
        data: JSON.stringify({ids: [1, 2, 3], name: "kim"}),
        success: function (res) {
        },
        error: function (request, status, error) {
        }
    });

Server

Json 데이터를 바인딩할 객체

public class Test {

    private List<Integer> ids;
    private String name;
    
    //setter, getter 생략
    
}

    @PostMapping(value = "/test")
    @ResponseBody
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void test(
            @RequestBody(required = false) Test test
    ) {
        logger.info("test : {}", test);
    }