AJAX로 글쓰기

Apr 19, 2024

[ 완성 시키는 순서 ]


1. input 태그에 있는 id 3개를 찾아서, 값을 들고오자
2. 들고온 값을 json으로 변경
3. AJAX 통신 요청
4. 실패시 어떻게 할지, 성공시 어떻게 할지 정하기
   (ex. 글쓰기 성공시 main페이지로 redirection, 실패시 alert 띄우기)

1. saveForm.mustache에서 하기


프런트와 같이 협업을 할 때, 주도권은 백엔드 개발자한테 있다.
데이터 타입이 json이면 form 태그를 못 쓴다.

그럼 form 태그를 사용하고 싶은 프런트는 
json으로 받으면 ajax를 써야하니까 x-form 데이터로 바꿔달라고 요청할 것

form태그는 발동을 안하니 껍데기 상태. 
(ajax로하면 form 태그가 발동안해서 껍데기라고 하심)
껍데기는 놔둬도 됨, submit이 필요 없음


* name 값 = form태그에서 쓰기 때문에
  (자바 스크립트 function을 실행 시킬거니까) jQuery로 찾으려면 id가 있어야한다.
  $("#author") 이런식으로 쓰기 위해 id를 쓴다 이제!! → ajax 일 때!

- name → id로 변경하기
- id로 찾아서 데이터 꺼내기

또한
form 태그 안에 있으면 button이 submit으로 자동으로 발동되니까 이것도 바꿔줘야함
(실행했을 때 submit이면 action이 발동한다는 말이니까)

`type="submit"` 을 지워주고 type을 button으로 바꾸자!! onclick으로도 바꿔주자!! 
action 발동 안되게.. (form태그 안에 버튼을 넣지 말던가, button type을 button으로 하던가)

<button type="button" onclick="btnWrite()" class="btn btn-primary form-control">글쓰기완료</button>
이런 식으로...

💡

onclick해서 button 클릭해서 btnWrite() 실행(클릭)되는지 확인하기

되는지 확인하고 코드 짜야 함!! 제발 확인 안 해보고 바로 코드를 짜지 마라!!

💡

onclick 속성은 웹 페이지의 HTML 요소에 대해 클릭 이벤트가 발생했을 때 실행될 자바스크립트 코드를 지정하는 데 사용

💡

디버깅 1순위 → 꼭!!! 실행되는지 확인을 하고 넘어가기!!


글쓰기 완료를 누르니 alert 실행 확인 완료!

2. json으로 받을 DTO 만들기


package shop.mtcoding.blog.board;

import lombok.Data;

public class BoardRequest {

    @Data
    public static class WriteDTO{ // json으로 받을 DTO
        private String title;
        private String content;
        private String author;
    }
}

3. json으로 전송할 서버(write) 만들기


 //자바 스크립트 요청할거라 여기서 함. 페이지 리턴하면 안됨! json을 응답해야함!!
   
 @PostMapping("/api/boards")
    public ApiUtil<?> write(@RequestBody BoardRequest.WriteDTO requestDTO) {
        boardRepository.insert(requestDTO);
        return new ApiUtil<>(null);
    }

💡

@RequestBody = json 데이터로 받을 수 있다

[ insert 수정하기 ]


repository에서 insert 를 바꿔줌 DTO 만들었으니까!
(원래 코드는 DTO를 받는게 아니라 String title, String content, String author 였음...)

[ JUNUIT에서 insert_test() 수정하기 ]


insert 코드를 수정했으니 test 코드에서도 수정하자 동작 잘 되는지 확인!
-> 인서트 쿼리는 문제 없구나

💡

테스트 코드에서도 테스트 해 보고, 포스트맨으로도 때려서 내가 다 테스트 해보자!! 그 뒤에 완성 됐다고 넘기는 것!!

포스트맨으로 확인


데이터 넣어서 send 해서 확인 ㄱㄱ


이렇게 TEST 해보자!
아직 불러오는 통신 구현이 안되서 포스트 맨으로 값을 넣거나 삭제해도 null로 뜨는 것 같다..

4. AJAX 통신 요청하기 ✓

💡

잘 되면 board 객체가 만들어질 것. (아직까진 자바 스크립트 오브젝트임)


jQuery가 .val()를 하면 value 값으로 들어와주니까 .val()을 적는다.
다 했으면 콘솔창에서 확인 해보자!


데이터 잘 땡겨왔다. 
근데 이거 json 데이터 아니고 자바 스크립트 오브젝트잖어. json으로 받아오자

[ json으로 바꿔주는 코드 추가 ]


통신해서 보낼려고 json 문자열로 받았음. 통신해서 보내보자고!

밑에 {"title":"gsdsd", "content":"gds", "author":"gsadsg"} 
라고 json으로 받아온 거 보이쥬?

[ 화면에 뿌리는 코드 ]


이건 DB에 전송하는 데이터가 아니라, 
let board에 들어있는 값들을 찾아서 가지고 오고, 
json으로 바꿔서 화면에 전송을 해주는 것 (뿌리는 코드)

💡

바디 데이터가 있으니 꼭!!! 컨텐트 타입을 넣어주자!!!!

[ 화면 확인 ]

💡

글쓰기 완료!!

saveForm.mustache 전체 코드


{{> layout/header}}

<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" id="author">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" id="title">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" id="content"></textarea>
                </div>
                <button type="button" onclick="btnWrite()" class="btn btn-primary form-control">글쓰기완료</button>
            </form>
        </div>
    </div>
</div>

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

        $.ajax({
            url: "/api/boards",
            type: "post",
            data: JSON.stringify(board),
            contentType: "application/json; charset=utf-8"
        }).done((res)=>{
            location.href = "/";
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    }
</script>

{{> layout/footer}}

TIP!

💡

location.href = "/"; 변수 -> 이거 = 라서 헷갈림. 메서드가 아님

See more posts