Spring MVC 프론트에서 컨트롤러로 input name 으로 값 여러개 전달하기 Ajax

ajax 사용하여 프론트 -> 컨트롤러 input name 으로 입력 값 여러개 전달하는 방법

 

input name

 

<input type="number" name="minAmount">
<input type="number" name="maxAmount">
<select name="feeType">
	<option value="0">선택1</option>
    <option value="1">선택2</option>
</select>
<input type="number" name="fee">

 

MVC 프로젝트에서 저런 형태로 반복되는 여러개의 데이터들을 컨트롤러로 보내야 하는 상황이 있습니다.

프론트에서 입력한 값을 javascript에서 체크하여 ajax 통신으로 컨트롤러에 보내는 방법을 사용했습니다.

 

* 실제로는 javascript로 팝업창을 띄우고 설정 창을 열어 값을 입력받는 상황이라 ajax를 사용하여 통신하고 팝업창을 닫는 과정까지 진행했지만 javascript를 거치지 않고도 프론트 -> 컨트롤러로 여러 개의 값을 보낼 수 있습니다.

 

 

<script>
    let rowNum = $("input[name='rowNub']").length;

    let FeeSetting = function (minAmount, maxAmount, feeType, fee) {
        this.minAmount = minAmount;
        this.maxAmount = maxAmount;
        this.feeType = feeType;
        this.fee = fee;
    }

    let param = [];
    for(i=0; i<rowNum; i++) {
        let feeSetting = new FeeSetting(
            $("input[name='minAmount']").eq(i).val(),
            $("input[name='maxAmount']").eq(i).val(),
            $("selected[name='feeType']").eq(i).val(),
            $("input[name='fee']").eq(i).val()
        )
        param.push(feeSetting);
    }
</script>

 

동일한 형태의 반복되는 값이기 때문에 for문을 통해 객체를 생성해서 배열로 넘기는 방법을 사용하였습니다.

위의 방법으로 param을 생성하여 ajax 통신으로 컨트롤러에 전송하였습니다.

 

* jquery, ajax에 대한 자세한 내용은 기록하지 않았습니다.

 

 

@Getter
@Setter
public class FeeSetting {
    private BigDecimal minAmount;
    private BigDecimal maxAMount;
    private String feeType;
    private Long fee;
}

RequestDto

 

dto 생성시 주의할 점은 input에서 설정해준 name 이름과 instance 이름을 같게 해야한다는 점입니다.

그리고 각 인스턴스에 Setter method 가 필요합니다. 

(lombok을 사용하여 @어노테이션으로 대체했습니다.)

 

@ResponseBody
@PostMapping("/example")
public void examplePoint(@RequestBody List<FeeSetting> feeSettingList) {
	
}

Controller

 

컨트롤러에서 해당하는 dto를 제네릭으로 한 리스트로 javascript 에서 넘어온 값을 받을 수 있습니다.