Ajax에서 Controller로 보낸 값이 제대로 들어오지 않는 오류 (Feat. 장바구니 기능)

🛠 개발환경

Editor : Intellij Ultimate

Deb Tool : SpringBoot 2.7.5

JDK : JAVA 11

Build : Gradle 6.8

Server : AWS EC2

DevOps : Docker

DB : MySql 8.0

Library : SpringBoot Web, MySQL, Spring Data JPA, Lombok, Spring Security, Thymeleaf

 

 

❓ Ajax에서 Controller로 보낸 값이 제대로 들어오지 않는다 ❓

장바구니에서 상품 일부를 주문하는 경우를 대비하여 주문하기 버튼 클릭 시 상품 체크 여부를 true와 false로 전달하기로 하고 개발을 하던 중이었다.

프론트에서 값이 잘 담기는지 확인하기 위해 Console에서 결과를 확인하였고 그 결과 true와 false로 기록되는 것을 확인할 수 있었다.

그러나 Controller에서 log 확인 시 모두 false로 기록이 되었다.

"값이 매핑이 안되어서 CheckOrderItemDto에 아예 안들어오는건가?" 싶었지만 item id에는 알맞게 데이터가 잘 들어오는 것을 보니 그 점은 아닌것 같았다.

혹시 isChecked만 데이터 맵핑이 안되어 boolean의 기본값인 false로 바뀌는 건가 추측해보았다.

 

[👇 cart.js]

function saveOrder() {
   console.log('purchaseOrder() 실행');
    var items = $(".form-check-input");
    console.log(items);
    var orderItems = [];

    for(var [idx, selectElement] of Object.entries(items)) {
        console.log(isNaN(idx));
        const cartItemId = $(selectElement).attr("cartItemId");
        const checked = selectElement.checked;
        if(!isNaN(idx)) {
            console.log("orderItems에 push합니다");
            console.log(idx + " 번 인덱스 타입 체크 = " + typeof checked);
            orderItems.push({
                id: cartItemId,
                isChecked: checked
            })
        }
    }

    console.log(orderItems);
    console.log(JSON.stringify(orderItems));

    $.ajax({
        url: "/api/v1/carts/checkOrder",
        method: "POST",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(orderItems)
    }).done((data) => {
        console.log(data);
        // location.href = "/carts/order";
    }).fail((error) => {
        console.log(error);
        if(error.result) {
            alert(error.result);
        }
    }).always(() => {
        console.log("주문 ajax 실행 완료");
    })
}

[👇 CartRestController.java]

@PostMapping("/checkOrder")
public Response<String> updateCheckItem (@RequestBody List<CheckOrderItem> checkCartItemDto, Authentication authentication) {
    String userName = authentication.getName();
    for (CheckOrderItem itemDto : checkCartItemDto) {
        log.info("item id = {}", itemDto.getId());
        log.info("item isChecked = {}", itemDto.isChecked());
    }
    cartService.updateCheckItem(checkCartItemDto, userName);
    return Response.success("장바구니 상품 체크 완료");
}

[👇 CheckOrderItemDto]

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@AllArgsConstructor
@NoArgsConstructor
public class CheckOrderItem {

    private Long id;

    private boolean isChecked;

}

 

Ajax을 이용한 데이터 전달 시 파라미터 타입이 반드시 일치하여야 Controller로 온전히 값을 받을 수 있다. 그래서 프론트에서 Console을 이용하여 Type을 확인해보았다.

Controller로 보내고자 하는 상품의 데이터가 모두 boolean 타입인 것을 잘 확인할 수 있었지만, 여전히 Controller에서는 모두 false가 나오는 것을 확인할 수 있었다.

 

2시간 넘게 고민한 결과 JSON으로 변환되어 넘어갈 때 boolean으로 온전히 넘어가는지 확인 해보기로 하였다.

Console에 출력해본 결과 JSON으로 변환했을 때 boolean타입이었던 check 변수가 String 타입으로 변환되어 발생하는 문제였다.

즉, Parameter Type Missmatch 😢

 

 

💡 해결 방법

코드를 다음과 같이 변경해주어 오류를 해결할 수 있었다.

[👇 CartOrderItemDto.java]

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@AllArgsConstructor
@NoArgsConstructor
public class CheckOrderItemDto {

    private Long id;

    private String isChecked;

}

[👇 CartRestController.java]

@PostMapping("/checkOrder")
public Response<String> updateCheckItem (@RequestBody List<CheckOrderItemDto> checkCartItemDto, Authentication authentication) {
    String userName = authentication.getName();
    for (CheckOrderItemDto itemDto : checkCartItemDto) {
        log.info("item id = {}", itemDto.getId());
        log.info("item isChecked = {}", itemDto.getIsChecked());
    }
    cartService.updateCheckItem(checkCartItemDto, userName);
    return Response.success("장바구니 상품 체크 완료");
}

[👇 CartItemService.java]

public void updateCheckItem(List<CheckOrderItemDto> checkOrderItemDtoList, String userName) {
    UserEntity user = validateUser(userName);

    CartEntity cart = validateCart(user);

    for (CheckOrderItemDto dto : checkOrderItemDtoList) {
        log.info("cartItemEntity 검증");
        CartItemEntity cartItem = validateCartItem(cart, dto.getId());
        boolean dtoCheck = dto.getIsChecked().equals("true")?true:false;
        if(cartItem.isChecked() != dtoCheck) {
            log.info("cartItemEntity 바꾸기");
            log.info("cartItem.isChecked : {}", cartItem.isChecked());
            log.info("dto.isChecked : {}", dtoCheck);
            cartItem.updateCheckItem();
            log.info("변경된 cartItem.isChecked : {}", cartItem.isChecked());
        }
    }
}

위와 같이 코드를 변경 후 다시 실행해보면 선택한 상품은 true, 선택하지 않은 상품은 false로 서버로 잘 넘어가는 것을 확

인할 수 있었다.