inblog logo
|
jjack1
    JavaScript

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

    최재원's avatar
    최재원
    Apr 03, 2025
    [JS] 10. get, post, put, delete
    Contents
    1. get2. post3. put4. delete직접 post 해보기

    1. get

    http://localhost:8080/api/boards/1
    notion image
    코드
    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
    notion image
    notion image
    코드
    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
    notion image
    notion image
    코드
    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
    notion image
    notion image
    코드
    async function delete1() {
    let response = await fetch(
        "http://localhost:8080/api/boards/1",
        {
            method: "delete",
        }
    );

    let responseBody = await response.json();

    console.log(responseBody);
}

    직접 post 해보기

    notion image
    notion image
    코드
    // 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>
    Share article
    Contents
    1. get2. post3. put4. delete직접 post 해보기

    jjack1

    RSS·Powered by Inblog