Ajax data를 Controller에서 받는 두 가지 방법 : Vo / Map

Ajax로 Parameter를 Controller로 data를 전송하면, Controller에서 받는 방법

1. VO(DTO)를 통해서 받는 방법

2. Map을 통해서 받는 방법

---

1. VO(DTO)로 받는 방법

const params = {
    id : id,
    postId : postId,
    modalContent : contents.value,
    modalWriter : writer.value
}

$.ajax({
    url : `/posts/${postId}/comments/${id}`,
    type : 'post',
    contentType : 'application/json; charset=utf-8',
    dataType : 'json',
    data : JSON.stringify(params),
    async : false,
    success : function (result) {
        alert('수정되었습니다.');
        closeCommentUpdatePopup();
        findAllComment();
    },
    error : function (request, status, error) {
        const result = request.responseJSON;
        alert(result.msg);
    }
});

Parameter를 json형태로 전송합니다.

@PostMapping("/posts/{postId}/comments/{id}")
public CommentDto updateComment(@PathVariable final Long postId, @PathVariable final Long id,
        @RequestBody CommentDto dto, @LoginUser UserSessionDto userDto) {
    
    log.debug("userDto :: {}", userDto);
    log.debug("postId :: {}", postId);
    log.debug("id :: {}", id);
    
    dto.setMdfId(userDto.getUserId());
    log.debug("CommentDto :: {}", dto);
    
    commentService.updateComment(dto);
    return commentService.findCommentById(id);
}

@RequestBody 어노테이션은 JSON 형태 또는 XML 형태를 받을 수 있는 Annotation 입니다.

---

JSON.stringify(param) 의 사용

pom.xml 파일에 com.fasterxml.jackson.core의 jackson-databind 를 추가 해줍니다.

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
        </dependency>

JSON.stringify 의 기능은 Parameter 가 "?a=1&b=2" 형식으로 넘겨지는걸 JSON 타입으로 변환해주는 역할을 합니다.

---

2. Map으로 받는 방법

const params = {
    id : id,
    postId : postId,
    modalContent : contents.value,
    modalWriter : writer.value
}

$.ajax({
    url : `/posts/${postId}/comments/${id}`,
    type : 'post',
    contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
    dataType : 'json',
    data : params,
    async : false,
    success : function (result) {
        alert('수정되었습니다.');
        closeCommentUpdatePopup();
        findAllComment();
    },
    error : function (request, status, error) {
        const result = request.responseJSON;
        alert(result.msg);
    }
});

..dataType 을 text 로 보내야  @RequestParam 으로 받을 수 있습니다.

    // 기존 댓글 수정
    @PostMapping("/posts/{postId}/comments/{id}")
    public CommentDto updateComment(@PathVariable final Long postId, @PathVariable final Long id,
            @RequestParam Map<String, Object> params, @LoginUser UserSessionDto userDto) {
        
        log.debug("userDto :: {}", userDto);
        log.debug("params :: {}", params);

        CommentDto dto = new CommentDto();
 
 		....
 
        return commentService.findCommentById(id);
    }

@RequestParam 은 하나씩 받을 수 도 있습니다.

    // 기존 댓글 수정
    @PostMapping("/posts/{postId}/comments/{id}")
    public CommentDto updateComment(@PathVariable final Long postId, @PathVariable final Long id,
            @RequestParam(required = true, value = "id") Integer pId,
            @RequestParam(required = true, value = "postId") Integer pPostId,
            @RequestParam(required = true, value = "modalContent") String modalContent,
            @RequestParam(required = false, value = "modalWriter") String modalWriter,
            @LoginUser UserSessionDto userDto,
            Model model) {
        
        log.debug("userDto :: {}", userDto);
        log.debug("model :: {}", model);
        log.debug("pId :: {}", pId);
        log.debug("pPostId :: {}", pPostId);
        log.debug("modalContent :: {}", modalContent);
        log.debug("modalWriter :: {}", modalWriter);

        CommentDto dto = new CommentDto();
 
 		....
 
        return commentService.findCommentById(id);
    }

---

3. 배열(Array)을 받는 방법

const params = {
    arrCheck : [1, 3, 5]
}

$.ajax({
    url : `/posts/${postId}/comments/${id}`,
    type : 'post',
    contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
    dataType : 'json',
    data : params,
    async : false,
    success : function (result) {
        alert('수정되었습니다.');
        closeCommentUpdatePopup();
        findAllComment();
    },
    error : function (request, status, error) {
        const result = request.responseJSON;
        alert(result.msg);
    }
});

넘기는 방식은 동일하고, Parameter 만 변경된 소스입니다.

    // 기존 댓글 수정
    @PostMapping("/posts/{postId}/comments/{id}")
    public CommentDto updateComment(@PathVariable final Long postId, @PathVariable final Long id,
            @RequestParam(required = false, value = "arrCheck[]") List<Integer> arrCheck,
            @LoginUser UserSessionDto userDto,
            Model model) {
        
        log.debug("userDto :: {}", userDto);
        log.debug("model :: {}", model);
        log.debug("arrCheck :: {}", arrCheck);

        CommentDto dto = new CommentDto();
 
 		....
 
        return commentService.findCommentById(id);
    }

---

어찌 하다보니

@RequestBody와 @RequestParam의 차이를 확인하게 되었습니다.

Json 데이터를 Controller로 전송하는 방법을 테스트 하게 되었네요.

테스트 소스는 요즘 개발하고 있는 게시판 소스를 기반하였습니다.

https://hermeslog.tistory.com/711

[Spring Boot] 게시판 #4 - 게시판 + 댓글