[Spring] 자바스크립트 - AJAX 통신을 활용한 게시글 수정

Feb 29, 2024

Contents

1. View 확인 2. 게시글 데이터 가져오기 3. DTO 만들기 4. API 컨트롤러 5. 레파지토리 6. AJAX 통신하기 7. 결과 확인

1. View 확인

board/saveForm.mustache


<button type="button" onclick="btnUpdate()" class="btn btn-primary form-control">글수정완료</button>

수정 페이지의 버튼이다. 버튼을 누르면 onclick 이 실행되면서 btnUpdate() 함수가 실행된다.

board/saveForm.mustache


<script>
    function btnUpdate(){
        alert("클릭");
    }
</script>

버튼이 정상적으로 작동한다.

게시글 수정은 기존 작성글이 있기 때문에 수정 전 데이터를 가져와야 한다.

2. 게시글 데이터 가져오기

BoardController


    @GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id, HttpServletRequest request) {
        
        Board board = boardRepository.selectOne(id);
        request.setAttribute("board",board);
        
        return "board/updateForm";
    }

BoardRepository


    public Board selectOne(int id){
        Query query = em.createNativeQuery("select * from board_tb where id = ?", Board.class);
        query.setParameter(1, id);

        try {
            Board board = (Board) query.getSingleResult();
            return board;
        } catch (Exception e) {
            return null;
        }
    }

DB에서 게시글의 데이터를 가져와 리퀘스트 객체에 담는다.

board/updateForm.mustache


<div class="container p-5">
    <div class="card">
        <div class="card-header"><b>익명 글수정 화면입니다</b></div>
        <div class="card-body">
            <form">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter author" name="author" value="{{board.author}}">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" name="title" value="{{board.title}}">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" name="content">{{board.content}}</textarea>
                </div>
                <button type="button" onclick="btnUpdate()" class="btn btn-primary form-control">글수정완료</button>
            </form>
        </div>
    </div>
</div>

리퀘스트 객체로 가져온 데이터를 화면에 출력한다.

3. DTO 만들기

BoardRequest


    @Data
    public static class UpdateDTO{
        private String title ;
        private String content;
        private String author;        
    }

클라이언트에게 입력받은 데이터를 받는다.

4. API 컨트롤러

BoardApiController


    @PutMapping("/api/boards/{id}")
    public ApiUtil<?> update(@PathVariable Integer id,@RequestBody BoardRequest.UpdateDTO requestDTO){

        boardRepository.update(requestDTO,id);
        return new ApiUtil<>(null);
    }

클라이언트가 입력한 데이터를 레파지토리에 전달한다. 게시글의 번호를 통해 데이터를 찾기 때문에 id를 함께 전달한다.

5. 레파지토리


    @Transactional
    public void update(BoardRequest.UpdateDTO requestDTO, Integer id) {
        Query query = em.createNativeQuery("update board_tb set title=?,content=?,author=? where id=?");
        query.setParameter(1,requestDTO.getTitle());
        query.setParameter(2,requestDTO.getContent());
        query.setParameter(3,requestDTO.getAuthor());
        query.setParameter(4,id);
        query.executeUpdate();
    }

클라이언트가 입력한 데이터를 받아 데이터를 업데이트 한다.

6. AJAX 통신하기

6.1 데이터 가지고 오기


<script>
    function btnUpdate(){

        let id= $("#id").val();

        let board={
            title:$("#title").val(),
            content:$("#content").val(),
            author:$("#author").val()
        };
        
    }
</script>

6.2 데이터 JSON으로 변환


   url:"/api/boards/{{board.id}}",
   type:"put",
   data:JSON.stringify(board),
   contentType:"application/json; charset=utf-8"

6.3 AJAX 통신


<script>
    function btnUpdate(){

        let id= $("#id").val();

        let board={
            title:$("#title").val(),
            content:$("#content").val(),
            author:$("#author").val()
        };
        $.ajax({
            url:`/api/boards/${id}`,
            type:"put",
            data:JSON.stringify(board),
            contentType:"application/json; charset=utf-8"
        }).done((res)=>{
            location.href="/";
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    };
</script>

통신이 완료되면 메인 페이지, 실패하면 오류 팝업을 띄운다.

7. 결과 확인

index.mustache


 <form action="/board/${board.id}/updateForm" method="get">

게시글 수정 버튼에 게시글 번호를 표시한다.

updateForm.mustache


{{> layout/header}}
<div class="container p-5">
    <div class="card">
        <div class="card-header"><b>익명 글수정 화면입니다</b></div>
        <div class="card-body">
            <form>
                <input type="hidden" id="id" value="{{board.id}}">
                <div class="mb-3">
                    <input type="text" class="form-control" id="author" value="{{board.author}}">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" id="title" value="{{board.title}}">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" id="content">{{board.content}}</textarea>
                </div>
                <button type="button" onclick="btnUpdate()" class="btn btn-primary form-control">글수정완료</button>
            </form>
        </div>
    </div>
</div>

<script>
    function btnUpdate(){

        let id= $("#id").val();

        let board={
            title:$("#title").val(),
            content:$("#content").val(),
            author:$("#author").val()
        };
        $.ajax({
            url:`/api/boards/${id}`,
            type:"put",
            data:JSON.stringify(board),
            contentType:"application/json; charset=utf-8"
        }).done((res)=>{
            location.href="/";
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });


    };
</script>

{{> layout/footer}}