MapleStory Finger Point

ํ”„๋กœํ•„์‚ฌ์ง„

๐ŸŸค JAVA/๐ŸŸค Spring Boot

[SpringBoot] ajax / fetch

HYEJU01 2024. 8. 26. 22:04

 

โ—ˆ AJAX (Asynchronous JavaScript and XML) ๋ž€?

AJAX๋Š” ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ์„ ์กฐํ•ฉํ•˜์—ฌ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์„œ๋ฒ„์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐฉ๋ฒ•

 

 

โ—ˆ Fetch API ๋ž€?

Fetch API๋Š” AJAX์™€ ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ์ตœ์‹  ์›น API๋กœ, ํ”„๋กœ๋ฏธ์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ ์š”์ฒญ์„ ๋”์šฑ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ฒ˜๋ฆฌ

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    ํƒ€์ž„๋ฆฌํ”„๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ทฐ ์ž…๋‹ˆ๋‹ค.
 
 
    <button type="button" id="getBtn">get๋ฐฉ์‹</button>
    <button type="button" id="postBtn">post๋ฐฉ์‹</button>
    <!--
    <script>
 
        var getBtn = document.getElementById("getBtn");
        getBtn.addEventListener("click", function() {
 
            fetch("/getData2/1/ํ™๊ธธ๋™")
            .then(function(response) {
                return response.text()
            })
            .then(function(data) {
                console.log(data)
            })
        })
 
        var postBtn = document.getElementById("postBtn");
        postBtn.addEventListener("click", function() {
            //post
            fetch("/getEntity", {
                method : "post",
                headers : {
                    "Content-Type" : "application/json"
                },
                body : JSON.stringify({num : 1, name : "ํ™๊ธธ๋™"})
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                console.log(data);
            })
 
        })
 
 
    </script>
    -->
 
    <!-- ์ œ์ด์ฟผ๋ฆฌ ๋งํฌ-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $("#getBtn").click(function() {
 
            $.ajax({
                type : "get", //์š”์ฒญ๋ฐฉ์‹
                url : "/getData2/1/์ด์ˆœ์‹ ", //์š”์ฒญ์ฃผ์†Œ
                success : function(data) {
                    console.log(data)
                },
                error: function(err, status) {
                    console.log(err)
                }
            })
 
        })
 
        $("#postBtn").click(function() {
            $.ajax({
                type : "post", //์š”์ฒญ๋ฐฉ์‹
                url : "/getEntity", //์š”์ฒญ๋ฐฉ์‹
                data : JSON.stringify({num : 1, name : "ํ™์ˆœ์ž"}), //๋ณด๋‚ผ๋ฐ์ดํ„ฐ
                contentType : "application/json", //๋ณด๋‚ผ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ํƒ€์ž…
                dataType : "json", //์„œ๋ฒ„๊ฐ€ ๋ฆฌํ„ดํ•˜๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž… (์ƒ๋žต๊ฐ€๋Šฅ)
                success : function(data) {
                    console.log(data);
                },
                error : function(err, status) {
                    console.log(err);
                }
            })
        })
 
 
 
    </script>
 
 
 
 
 
 
    <button type="button" id="ex01">ex01</button>
    <button type="button" id="ex02">ex02</button>
 
    <script>
        var ex01 = document.getElementById("ex01");
        ex01.addEventListener("click", function() {
 
            fetch("/api/v1/getData?sno=1&name=์ด์ˆœ์‹ ")
                .then(function(response) {
                    return response.json() //์‘๋‹ต json
                })
                .then(function(data) {
                    console.log(data)
                })
        })
 
        var ex02 = document.getElementById("ex02");
        ex02.addEventListener("click", function() {
 
            fetch("/api/v1/getInfo", {
                method : "post",
                headers : {
                    "Content-type" : "application/json"
                },
                body : JSON.stringify({memo: "ํ™๊ธธ๋™123123", phone: "010-1234-1234"})
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                console.log(data);
            })
 
        })
 
 
    </script>
 
 
 
 
 
</body>
</html>

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'๐ŸŸค JAVA/๐ŸŸค Spring Boot'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[SpringBoot] ajax / fetch

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”