[JS] 10. get, post, put, delete

최재원

Apr 03, 2025

Contents

1. get 2. post 3. put 4. delete 직접 post 해보기

1. get

http://localhost:8080/api/boards/1

코드


async function get1() {
    let response = await fetch(
        "http://localhost:8080/api/boards/1",
        {
            method: "get",
        }
    );
    let responseBody = await response.json();

    console.log(responseBody);
}

2. post

http://localhost:8080/api/boards

코드


async function post1() {
    let requestBody = {
        title: "제목9",
        content: "내용9",
        author: "ssar",
    };

    let response = await fetch("http://localhost:8080/api/boards", {
        method: "post",
        body: JSON.stringify(requestBody),
        headers: { "Content-Type": "application/json" },
    });

    let responseBody = await response.json();

    console.log(responseBody);
}

3. put

http://localhost:8080/api/boards/1

코드


async function put1() {
    let requestBody = {
        title: "제목11",
        content: "내용11",
        author: "ssar",
    };

    let response = await fetch(
        "http://localhost:8080/api/boards/1",
        {
            method: "put",
            body: JSON.stringify(requestBody),
            headers: { "Content-Type": "application/json" },
        }
    );

    let responseBody = await response.json();
    console.log(responseBody);
}

4. delete

http://localhost:8080/api/boards/1

코드


async function delete1() {
    let response = await fetch(
        "http://localhost:8080/api/boards/1",
        {
            method: "delete",
        }
    );

    let responseBody = await response.json();

    console.log(responseBody);
}

직접 post 해보기

코드


// write 함수는 document.write() 함수로 HTML에 내용을 추가하는 함수다
// 이 함수를 사용하면 기존 HTML 내용이 다 지워진다
async function write1() {
    let requestBody = {
        title: document.querySelector("#title").value,
        content: document.querySelector("#content").value,
        author: document.querySelector("#author").value,
    };

    let response = await fetch("http://localhost:8080/api/boards", {
        method: "post",
        body: JSON.stringify(requestBody),
        headers: { "Content-Type": "application/json" },
    });

    let responseBody = await response.json();

    console.log(responseBody);
}

전체 코드


<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <h1>fetch get, post, put, delete</h1>
        <hr />
        <button onclick="get1()">get</button>
        <button onclick="post1()">post</button>
        <button onclick="put1()">put</button>
        <button onclick="delete1()">delete</button>

        <form>
            <input type="text" id="title" placeholder="title" /><br />
            <input type="text" id="content" placeholder="content" /><br />
            <input type="text" id="author" placeholder="author" /><br />
            <button type="button" onclick="write1()">게시글쓰기</button>
        </form>

        <script>
            // write 함수는 document.write() 함수로 HTML에 내용을 추가하는 함수다
            // 이 함수를 사용하면 기존 HTML 내용이 다 지워진다
            async function write1() {
                let requestBody = {
                    title: document.querySelector("#title").value,
                    content: document.querySelector("#content").value,
                    author: document.querySelector("#author").value,
                };

                let response = await fetch("http://localhost:8080/api/boards", {
                    method: "post",
                    body: JSON.stringify(requestBody),
                    headers: { "Content-Type": "application/json" },
                });

                let responseBody = await response.json();

                console.log(responseBody);
            }

            async function get1() {
                let response = await fetch(
                    "http://localhost:8080/api/boards/1",
                    {
                        method: "get",
                    }
                );
                let responseBody = await response.json();

                console.log(responseBody);
            }

            async function post1() {
                let requestBody = {
                    title: "제목9",
                    content: "내용9",
                    author: "ssar",
                };

                let response = await fetch("http://localhost:8080/api/boards", {
                    method: "post",
                    body: JSON.stringify(requestBody),
                    headers: { "Content-Type": "application/json" },
                });

                let responseBody = await response.json();

                console.log(responseBody);
            }

            async function put1() {
                let requestBody = {
                    title: "제목11",
                    content: "내용11",
                    author: "ssar",
                };

                let response = await fetch(
                    "http://localhost:8080/api/boards/1",
                    {
                        method: "put",
                        body: JSON.stringify(requestBody),
                        headers: { "Content-Type": "application/json" },
                    }
                );

                let responseBody = await response.json();
                console.log(responseBody);
            }

            async function delete1() {
                let response = await fetch(
                    "http://localhost:8080/api/boards/1",
                    {
                        method: "delete",
                    }
                );

                let responseBody = await response.json();

                console.log(responseBody);
            }
        </script>
    </body>
</html>

See more posts

[JS] 10. get, post, put, delete

1. get

2. post

3. put

4. delete

직접 post 해보기

More articles

[JS] 12. 쿠키&세션 인증의 한계

[JS] 11. CSR(Client-Side-Rendering)

[JS] 9. 자바스크립트 동작 방식

[운영체제] 7. 프로세스 상태(휴식, 보류)와 문맥 교환