본문 바로가기
Framekwork/SPRING

[JAVA/SPRING] ajax 다뤄보기 (코딩레시피)

by 아이엠제니 2023. 4. 11.

 

01_ajax 소개(springboot, ajax)

  • 강의 주제
    • ajax 다뤄보기
  • 사용 Dependeny
    • Lombok
    • Spring Web
    • Thymeleaf
  • 주요 내용
    • front 페이지에서 ajax 요청을 어떻게 보내고, Controller에서 어떻게 받는지 알아봅니다.
    • ResponseBody, ResponseEntity 리턴을 활용해 봅니다.
    • ajax에서 리턴을 받아서 javascript로 어떻게 활용하는지 알아봅니다.
  • ajax 활용?
    • 이메일 또는 아이디 중복체크
    • 좋아요 또는 싫어요
    • 찜
    • 댓글 작성

 

AJAX(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저와 서버 간의 비동기적인 데이터 교환을 수행하는 기술

세팅

💾 com.in.ajaxex.controller > HomeController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("/")
    public String index() {
        return "index";
    }
}

 

💾 resources > application.yml

 

server:
  port: 8092

 

💾  recources.templates > index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        a {
            display: block;
        }
    </style>
</head>
<body>

<a href="/ajax-ex-01">01_get 요청하기</a>
<a href="/ajax-ex-02">02_post 요청하기</a>
<a href="/ajax-ex-03">03_get 요청 & parameter 전달하기</a>
<a href="/ajax-ex-04">04_post 요청 & parameter 전달하기</a>
<a href="/ajax-ex-05">05_get 요청 & parameter DTO로 받기(@ModelAttribute) & DTO 객체 리턴하기</a>
<a href="/ajax-ex-06">06_post 요청 & parameter DTO로 받기(@ModelAttribute) & DTO 객체 리턴하기</a>
<a href="/ajax-ex-07">07_post 요청 & parameter DTO로 받기(@Requestbody) & DTO 객체 리턴하기</a>
<a href="/ajax-ex-08">08_post 요청 & parameter 전달하기 & List 객체 리턴 하기</a>
<a href="/ajax-ex-09">09_post 요청 & parameter 전달하기 & ResponseEntity에 DTO 객체 리턴 하기</a>
<a href="/ajax-ex-10">10_post 요청 & parameter 전달하기 & ResponseEntity에 List 객체 리턴 하기</a>

</body>
</html>

02_ajax 설정 및 get 요청 보내기

💾 controller > AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {
    @GetMapping("/ajax-ex-01") // 해당 경로로 GET 요청이 들어올 때
    // ajaxEx01() 메서드 호출
    public String ajaxEx01() {
        // 컨트롤러에서 반환하는 문자열은 View Resolver를 사용하여 해당 문자열을 뷰(View) 이름으로 해석하고,
        // 뷰 이름에 해당하는 템플릿을 찾아서 렌더링함
        // 컨트롤러는 요청을 받아 처리한 후, 뷰 이름을 반환하는 역할을 함
        return "ajax-ex-01"; // 해당 문자열 반환 .html 로
//        return ""; // 빈값이면 파일을 못 찾기 때문에 500 에러가 난다
    }

}

 

💾 templates > ajax-ex-01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex01</title>
<!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
    <button onclick="ex01Fn()">ex01 함수 호출</button>

<script>
    const ex01Fn = () => {
        $.ajax({
            // 요청방식: get
            // 요청주소: /ex01
            type: "get",
            url: "/ex01",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 controller > AjaxController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxController {
    @GetMapping("/ex01")
    public String ex01() {
        System.out.println("AjaxController.ex01");
        return "index";
    }
}

 

03_ajax post 요청하기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {
    @GetMapping("/ajax-ex-01")
    public String ajaxEx01() {
        return "ajax-ex-01";
    }
    // 추가
    @GetMapping("/ajax-ex-02")
    public String ajaxEx02() {
        return "ajax-ex-02";
    }
}

 

💾 ajax-ex-02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex02</title>
<!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
    <button onclick="ex02Fn()">ex02 함수 호출</button>

<script>
    const ex02Fn = () => {
        $.ajax({
            // 요청방식: post
            // 요청주소: /ex02
            type: "post",
            url: "/ex02",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class AjaxController {
    @GetMapping("/ex01")
    public String ex01() {
        System.out.println("AjaxController.ex01");
        return "index"; // index.html에 작성된 내용이 출력됨
    }

    @PostMapping("/ex02") // HTTP POST 요청을 처리하는 메서드
    // @ResponseBody: 메서드가 반환하는 데이터를 HTTP 응답 본문(response body)으로 전송함을 나타냄
    public @ResponseBody String ex02() {
        System.out.println("AjaxController.ex02");
        return "안녕하세요"; // 리턴값이 그대로 출력됨
    }
}

 

04_ajax get 요청하기 & parameter 보내기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략
    
    @GetMapping("/ajax-ex-03")
    public String ajaxEx03() {
        return "ajax-ex-03";
    }
}

 

💾 jajax-ex-03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex03</title>
<!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
    <button onclick="ex03Fn()">ex03 함수 호출</button>

<script>
    const ex03Fn = () => {
        const val1 = "Hello SpringBoot!!"
        $.ajax({
            // 요청방식: get
            // 요청주소: /ex03
            type: "get",
            url: "/ex03",
            // parameter 전달하기
            data: {
              "param1": val1,
              "param2": "안녕"
            },
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class AjaxController {
    @GetMapping("/ex01")
    public String ex01() {
        System.out.println("AjaxController.ex01");
        return "index"; // index.html에 작성된 내용이 출력됨
    }

    @PostMapping("/ex02") // HTTP POST 요청을 처리하는 메서드
    // @ResponseBody: 메서드가 반환하는 데이터를 HTTP 응답 본문(response body)으로 전송함을 나타냄
    public @ResponseBody String ex02() {
        System.out.println("AjaxController.ex02");
        return "안녕하세요"; // 리턴값이 그대로 출력됨
    }

    // 추가
    @GetMapping("/ex03")
    public @ResponseBody String ex03(@RequestParam("param1") String param1, @RequestParam("param2") String param2) {
        System.out.println("");
        System.out.println("param1 = " + param1 + ", param2 = " + param2);
        return "ex03메서드 호출 완료"; // 리턴값이 그대로 출력됨
    }
}

 

05_ajax post 요청하기 & parameter 보내기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략
    
    @GetMapping("/ajax-ex-04")
    public String ajaxEx04() {
        return "ajax-ex-04";
    }
}

💾 ajax-ex-04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex04</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex04Fn()">ex04 함수 호출</button>

<script>
    const ex04Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex04
            type: "post",
            url: "/ex04",
            // parameter 전달하기
            data: params,
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.lang.model.SourceVersion;
import java.util.ArrayList;
import java.util.List;

@Controller
public class AjaxController {

    @PostMapping("/ex04")
    public @ResponseBody String ex04(@RequestParam("param1") String param1, @RequestParam("param2") String param2) {
        System.out.println("");
        System.out.println("param1 = " + param1 + ", param2 = " + param2);
        return "ex04메서드 호출 완료"; // 리턴값이 그대로 출력됨
    }
}

06_ajax 요청하기 & 자바 클래스 객체 리턴 받기

@GetMapping

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략
    
    @GetMapping("/ajax-ex-05")
    public String ajaxEx05() {
        return "ajax-ex-05";
    }
}

 

💾 ajax-ex-05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex05</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex05Fn()">ex05 함수 호출</button>

<script>
    const ex05Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: get
            // 요청주소: /ex05
            type: "get",
            url: "/ex05",
            // parameter 전달하기
            data: params,
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 dto > AjaxDTO.java

package com.in.ajaxex.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
@AllArgsConstructor // 모든 필드를 매개변수로 하는 생성자
public class AjaxDTO {
    private String param1;
    private String param2;
}

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class AjaxController {

	// 생략

    // DTO: DTO는 Data Transfer Object의 약자로, 데이터 전송 객체를 뜻합니다. DTO는 계층 간 데이터 교환을 위해 사용되며,
    // 데이터베이스로부터 데이터를 가져와서 비즈니스 로직에서 사용하기 적합한 형태로 변환하는 역할
    // 클라이언트와 서버 간 데이터 통신에서도 DTO를 사용하여 데이터를 전달
    @GetMapping("/ex05")
    public @ResponseBody AjaxDTO ex05(@ModelAttribute AjaxDTO ajaxDTO) { // @modelAttribute: Model 객체에 추가하여 뷰에서 사용할 수 있도록 합니다.
        System.out.println("ajaxDTO = " + ajaxDTO);
        return ajaxDTO;
    }
}

 

@PostMapping

💾 AjaxViewController

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략
    
    @GetMapping("/ajax-ex-06")
    public String ajaxEx06() {
        return "ajax-ex-06";
    }
}

 

💾 ajax-ex-06.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex06</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex06Fn()">ex06 함수 호출</button>

<script>
    const ex06Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex06
            type: "post",
            url: "/ex06",
            // parameter 전달하기
            data: params,
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class AjaxController {

	// 생략
    
    @PostMapping("/ex06")
    public @ResponseBody AjaxDTO ex06(@ModelAttribute AjaxDTO ajaxDTO) { // @modelAttribute: Model 객체에 추가하여 뷰에서 사용할 수 있도록 합니다.
        System.out.println("ajaxDTO = " + ajaxDTO);
        return ajaxDTO;
    }
}

 

07_ajax @RequestBody 활용하기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략
    
    @GetMapping("/ajax-ex-07")
    public String ajaxEx07() {
        return "ajax-ex-07";
    }

}

 

💾 ajax-ex-07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex07</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex07Fn()">ex07 함수 호출</button>

<script>
    const ex07Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex07
            type: "post",
            url: "/ex07",
            // parameter 전달하기
            data: JSON.stringify(params),
            contentType: "application/json",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
                console.log("param1", res.param1);
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 Ajax-Controller.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.lang.model.SourceVersion;

@Controller
public class AjaxController {

	// 생략
    
    @PostMapping("/ex07")
    public @ResponseBody AjaxDTO ex07(@RequestBody AjaxDTO ajaxDTO) {
        System.out.println("ajaxDTO = " + ajaxDTO);
        return ajaxDTO;
    }
}

 

08_ajax 요청 & 자바 List 객체 리턴하기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략

    @GetMapping("/ajax-ex-08")
    public String ajaxEx08() {
        return "ajax-ex-08";
    }

}

 

💾 ajax-ex-08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex08</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex08Fn()">ex08 함수 호출</button>

<script>
    const ex08Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex08
            type: "post",
            url: "/ex08",
            // parameter 전달하기
            data: JSON.stringify(params),
            contentType: "application/json",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
                console.log(res[0]);
                console.log(res[1].param1);
                for (let i in res) {
                    console.log("i", i);
                    console.log(res[i]);
                }
            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.lang.model.SourceVersion;
import java.util.ArrayList;
import java.util.List;

@Controller
public class AjaxController {

	// 생략
    
    private List<AjaxDTO> DTOList() {
        List<AjaxDTO> dtoList = new ArrayList<>();
        dtoList.add(new AjaxDTO("data1", "data11"));
        dtoList.add(new AjaxDTO("data2", "data22"));
        return dtoList;
    }

    @PostMapping("/ex08")
    public @ResponseBody List<AjaxDTO> ex08(@RequestBody AjaxDTO ajaxDTO) {
        System.out.println("ajaxDTO = " + ajaxDTO);
        List<AjaxDTO> dtoList = DTOList();
        dtoList.add(ajaxDTO);
        return dtoList;
    }
}

 

09_ajax 요청 & ResponseEntity 활용하기

DTO 객체 리턴하기

 

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략

    @GetMapping("/ajax-ex-09")
    public String ajaxEx09() {
        return "ajax-ex-09";
    }

}

 

💾 ajax-ex-09.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex09</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex09Fn()">ex09 함수 호출</button>

<script>
    const ex09Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex09
            type: "post",
            url: "/ex09",
            // parameter 전달하기
            data: JSON.stringify(params),
            contentType: "application/json",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)

            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.lang.model.SourceVersion;
import java.util.ArrayList;
import java.util.List;

@Controller
public class AjaxController {

	// 생략

    @PostMapping("/ex09")
    public ResponseEntity ex09(@RequestBody AjaxDTO ajaxDTO) {
        System.out.println("ajaxDTO = " + ajaxDTO);
        return new ResponseEntity<>(ajaxDTO, HttpStatus.OK); // 데이터 리턴 ㄴㄴ, status code만 return
//        return new ResponseEntity<>(ajaxDTO, HttpStatus.NOT_FOUND); 
    }
}

List 객체 리턴하기

💾 AjaxViewController.java

package com.in.ajaxex.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AjaxViewController {

	// 생략

    @GetMapping("/ajax-ex-10")
    public String ajaxEx10() {
        return "ajax-ex-10";
    }

}

 

💾 ajax-ex-10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex10</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="ex10Fn()">ex09 함수 호출</button>

<script>
    const ex10Fn = () => {
        const val1 = "Hello SpringBoot!!"

        const params = {
            "param1": val1,
            "param2": "안녕"
        }

        $.ajax({
            // 요청방식: post
            // 요청주소: /ex10
            type: "post",
            url: "/ex10",
            // parameter 전달하기
            data: JSON.stringify(params),
            contentType: "application/json",
            // 요청이 성공했을 때 실행되는 부분
            success: function (res) {
                console.log("성공", res)
                console.log(res[0]);
                console.log(res[1].param1);
                for (let i in res) {
                    console.log("i", i);
                    console.log(res[i]);
                }

            },
            // 요청이 실패했을 때 실행되는 부분
            error: function (err) {
                console.log("실패", err);
            },
        })
    }
</script>

</body>
</html>

 

💾 AjaxController.java

package com.in.ajaxex.controller;

import ch.qos.logback.core.net.SyslogOutputStream;
import com.in.ajaxex.dto.AjaxDTO;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.lang.model.SourceVersion;
import java.util.ArrayList;
import java.util.List;

@Controller
public class AjaxController {

	// 생략

    @PostMapping("/ex10")
    public ResponseEntity ex10(@RequestBody AjaxDTO ajaxDTO) {
        System.out.println("ajaxDTO = " + ajaxDTO);
        List<AjaxDTO> dtoList = DTOList();
        dtoList.add(ajaxDTO);
        return new ResponseEntity<>(dtoList, HttpStatus.OK);
    }
}

 

 

 

유튜브 코딩레시피 [ajax 다뤄보기] 실습

 

300x250

'Framekwork > SPRING' 카테고리의 다른 글

[SPRING] 스프링 부트 - 프로젝트 환경설정  (0) 2023.08.28
[Spring Boot] 스프링 부트 게시판 프로젝트 실습 - application.yml 세팅  (0) 2023.08.20
[자바/스프링] 스프링 JdbcTemplate  (0) 2023.02.26
[자바/스프링] 스프링 통합테스트  (0) 2023.02.25
[자바/스프링] 순수 JDBC  (0) 2023.02.24

관련글

티스토리툴바