댓글처리_댓글작성 내용 서버로 요청하기

Point

ajax를 사용하기 때문에 jquery 필요하다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

 

board2detail.html

• 댓글 작성, 출력 부분, ajax로 값 떠넘기기를 한다. 
• 댓글 작성 부분과 출력부분을 레이아웃 나눈다.
• 댓글작성 부분 (div#comment-write)은 form태그로 전송이 아니고 ajax로 넘기기 떄문에 div에 input태그를 넣는다.
• ajax 로 데이터 넘기기 전에 console에 해당 값이 받아와지는지 확인해본 후 ajax 코드 부분 완성해본다.
• ajax로 넘기기전에 controller에 넘겨야할 값과 어떤 방식으로 넘길지 작성해 놓는다. 
  • 요청 방식 : post
  • 요청주소 : /comment/save
  • 요청데이터 : 작성자, 작성내용, 게시글 번호

<!-- 댓글 작성 부분-->
<div id="comment-write">
    <input type="text" id="commentWriter" placeholder="작성자">
    <input type="text" id="commentContents" placeholder="내용">
    <button id="comment-write-btn" onclick="commentWrite()">댓글작성</button>
</div>

<!-- 댓글 출력 부분 -->
<div id="comment-list">
</div>

<!-- console에 해당 값이 받아와지는지 확인 -->
<script th:inline="javascript">

    const commentWrite = () => {
        const writer = document.getElementById("commentWriter").value;
        const contents = document.getElementById("commentContents").value;
        console.log("작성자 : ", writer );
        console.log("내용 : ", contents );
        const id = [[${board.id}]]; // 게시글 번호


    }

</script>

<!-- console에 해당 값이 받아와지는지 확인 후 ajax부분 코드 작성 -->
<script th:inline="javascript">

    const commentWrite = () => {
        const writer = document.getElementById("commentWriter").value;
        const contents = document.getElementById("commentContents").value;
        console.log("작성자 : ", writer );
        console.log("내용 : ", contents );
        const id = [[${board.id}]]; // 게시글 번호

        $.ajax({
            // 요청 방식 : post, 요청주소 : /comment/save , 요청데이터 : 작성자, 작성내용, 게시글 번호
            type : "post",
            url : "/comment/save",
            data : {
                "commentWriter" : writer,
                "commentContents" : contents,
                "boardId" : id
            },
            success: function(res){
               console.log("요청 성공 : ",res);
               
            },
            error: function(err){
                console.log("요청실패 : ",err);
            }

        });

    }

</script>

 

CommentDTO

@Getter
@Setter
@ToString
public class CommentDTO {

    private Long id;
    private String commentWriter;
    private String commentContents;
    private Long boardId;
    private LocalDateTime commentCreatedTime;

}

 

CommentController

@Controller
@RequiredArgsConstructor
@RequestMapping("/comment")
public class CommentController {

    private final CommentService commentService;

    @PostMapping("/save")
    public @ResponseBody String save(@ModelAttribute CommentDTO commentDTO){
        System.out.println("commentDTO =" + commentDTO);
        return "요청성공";
    }
}