Ajax data Controller에서 받는 방법

Ajax 데이터를 Controller에서 받는 몇 가지 방법을 소개해드립니다.
쇼핑몰 프로젝트에서 사용한 예시를 들어서 설명드리겠습니다.

📝1. @RequestParam

• @RequestParam은 요청 파라미터나 Form으로 넘어온 데이터를 조회하는데 사용됩니다.

 <!-- 장바구니 상품 삭제 -->
 <script>
    function deleteCartItem(itemId) {

        var cartItemForm = {
            cartItemId : itemId
        };

        $.ajax({
            url: "/cart",
            type: 'DELETE',
            data: cartItemForm,

            <!-- 성공시 -->
            success: function (result) {
                alert("선택하신 상품이 삭제되었습니다.");
                location.href="/cart"
            },
            <!-- 실패시 -->
            error: function (jqXHR) {
                alert(jqXHR.responseText);
                location.href = "/cart";
            }
        })
    }
 </script>

	//Controller
 	@DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@RequestParam Long cartItemId) {

        log.info("itemId={}", cartItemId);

        if (cartService.findCartItem(cartItemId) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }

        cartService.deleteCartItem(cartItemId);
        return ResponseEntity.ok("success");
    }

• ajax는 'itemId'를 data에 매핑해서 controller로 보냅니다.
• Controller의 @RequestParam을 이용하여 ajax에서 넘어온 'itemId'를 받을 수 있습니다.
• ajax의 URL에 'itemId'를 파라미터로 추가해서 전송해도 되지만 특수문자가 들어올 경우를 대비해 data로 보내는 것이 맞다 생각합니다.

---

📝2. @ModelAttribute

• @ModelAttribute도 @RequestParam과 동일하게 요청 파라미터나 Form으로 넘어온 데이터를 조회하는데 사용됩니다.
• Ajax 부분은 1번 방법과 동일합니다.

	//Controller
 	@DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@ModelAttribute cartItemForm form) {

        log.info("itemId={}", form.getCartItemId());

        if (cartService.findCartItem(form.getCartItemId()) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }

        cartService.deleteCartItem(form.getCartItemId());
        return ResponseEntity.ok("success");
    }

@Getter
@Setter
public class cartItemForm {

    private Long cartItemId;

}

• @ModelAttribute는 바로 객체로 받을 수 있습니다.

---

📝3. @RequestBody

• @RequestBody의 경우 위의 @RequestParam, @ModelAttribute와 같이 요청 파라미터를 조회하는 것과는 상관이 없습니다,
• @RequestBody는 메세지 바디를 직접 조회하는 기능입니다. 즉, Json 데이터를 조회할 수 있습니다.

   <!-- 장바구니 상품 삭제 -->
   <script>
    function deleteCartItem(itemId) {

        var cartItemForm = {
            cartItemId : itemId
        };

        $.ajax({
            url: "/cart",
            type: 'DELETE',
            data: JSON.stringify(cartItemForm),
            contentType: 'application/json',

            <!-- 성공시 -->
            success: function (result) {
                alert("선택하신 상품이 삭제되었습니다.");
                location.href="/cart"
            },
            <!-- 실패시 -->
            error: function (jqXHR) {
                alert(jqXHR.responseText);
                location.href = "/cart";
            }
        })
    }
 </script>

• data를 Json으로 변환하여 Controller로 보내줍니다.

	//Controller
	@DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@RequestBody cartItemForm form) {

        log.info("itemId={}", form.getCartItemId());

        if (cartService.findCartItem(form.getCartItemId()) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }

        cartService.deleteCartItem(form.getCartItemId());
        return ResponseEntity.ok("success");
    }

• JSON으로 넘어오는 데이터를 @RequestBody로 성공적으로 받았습니다.
• @RequestBody 요청 흐름 : Ajax -> JSON -> HTTP 메세지 컨버터 -> 객체(CartItemForm)