스프링부트 / Fetch API를 이용하여 checkbox 다중값 백엔드로 전달하기

checkbox 다중값 벡엔드로 전달하기

이번 포스팅에서는 프론트에서 checkbox에 체크해준 여러개의 값들을 비동기 통신으로 백엔드에 전달하는 방법에 대해서 알아보려고 합니다. 사용된 통신방법은 Fetch API이며 javascript를 사용하고 있습니다.

Html Code

다음과 같이 밴드 포지션을 체크하는 항목들이 있습니다.

<div class="form-group">
    <label>포지션</label></br>
    <input class="position-checkbox" type="checkbox" value="보컬">보컬</input>
    <input class="position-checkbox" type="checkbox" value="피아노1">피아노1</input>
    <input class="position-checkbox" type="checkbox" value="피아노2">피아노2</input>
    <input class="position-checkbox" type="checkbox" value="일렉">일렉</input>
    <input class="position-checkbox" type="checkbox" value="베이스">베이스</input>
    <input class="position-checkbox" type="checkbox" value="드럼">드럼</input>
</div>

JavaScript Code

데이터를 전송하는 버튼을 눌렀을 때 동작하는 자바스크립트 함수가 있을 것입니다.

첫 단계로 그 함수 안에 체크박스 중 체크한 것들을 가져오는 변수를 만듭니다.

var $positions = document.querySelectorAll(".position-checkbox:checked");

보컬과 일렉기타를 선택하고 $positions[0] 과 $positions[1]을 출력해보면

위와 같이 나오는 것을 확인할 수 있습니다.
이제 position[] 배열을 선언하고 각각의 값들을 이곳에 담아줍니다.

var $positions = document.querySelectorAll(".position-checkbox:checked");
const positions = [];
for (let i = 0; i < $positions.length; i++) {
    positions.push($positions[i].value)
}

그리고 positions를 body에 담아 보냅니다.

fetch("/positions", {
    method: 'post',
    headers: {
        'content-type': 'application/json'
    },
    body : JSON.stringify({
        positions : positions
    })
})

Backend Code

백엔드에서 값을 받기위한 Request 객체를 만들고 Controller에서 값을 받으면 끗!

controller

@PostMapping("/positions")
public ResponseEntity<Void> join(@RequestBody PositionsRequest positionsRequest) {
    System.out.println(positionsRequest);
    return ResponseEntity.noContent().build();
}

PositionsRequest

package study.oc.base.domain.dto;

import java.util.List;

public class PositionsRequest {
    private List<String> positions;

    public PositionsRequest() {
    }

    public PositionsRequest(List<String> positions) {
        this.positions = positions;
    }

    public List<String> getPositions() {
        return positions;
    }

    @Override
    public String toString() {
        return "PositionsRequest{" +
                "positions=" + positions +
                '}';
    }
}

출력 결과