[SpringBoot, ajax] ajax 다뤄보기

HTML 파일 head태그에 jQuery CDN 추가

https://releases.jquery.com/

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

get 요청하기

AjaxController.java

package com.ajaxStudy.demo.Controller;

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

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

ajax 요청 후 index.html 페이지로 화면 전환되지 않는 이유?

1. 일반적인 spring boot MVC

컨트롤러 메서드에서 문자열을 반환하면 view resolver가 이 값을 해석해 해당 이름의 html을 찾아서 렌더링함.

2. ajax 호출

ajax 요청은 비동기적으로 데이터만 주고받기 때문에 전체 페이지가 새로 고쳐지지 않음

javascript 코드에서 해당 응답 데이터를 받아 필요한 부분만 처리함!

전체 화면 전환 x, 부분 업데이트 가능 O

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.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
  <button onclick="ex01Fn()">ex01 함수 호출</button>

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

post 요청하기

    @PostMapping("/ex02")
    public @ResponseBody String ex02(){
        System.out.println("AjaxController.ex02");
        return "index";
        // 리턴값이 그대로 출력됨
        // 리턴하는 값을 body에 실어서 보내준다. (ResponseBody의 역할)
        // success를 했을 때 넘겨받는 res는 body부분을 받아오는 것이다.
    }

* ResponseBody

컨트롤러 메서드의 반환 값을 뷰를 거치지 않고 바로 HTTP 응답 본문으로 전송하도록 하는 어노테이션

반환 값은 HTTP 응답 본문으로 전송되며, 클라이언트는 데이터를 받아처리하여 화면 전체가 바뀌지 않음

get 요청 & parameter 전달하기

    @GetMapping("/ex03")
    public @ResponseBody String ex03(@RequestParam("param1") String param1,
                                     @RequestParam("param2") String param2){
        System.out.println("param1 = " + param1 + "param2 = "  + param2);
        return "ex03 메서드 호출 완료";
    }

* RequestParam

클라이언트가 요청 시 전송한 rul 파라미터 값을 메서드의 매개변수에 바인딩함

data: {} 로 key : value로 전달하기

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() {
      console.log("실패");
    }
  })
}

get 요청 & parameter DTO로 받기(@ModelAttribute) & DTO 객체 리턴

    @GetMapping("/ex05")
    public @ResponseBody AjaxDTO ex05(@ModelAttribute AjaxDTO ajaxDTO){
        System.out.println("ajaxDTO =" + ajaxDTO);
        return ajaxDTO;
    }

* ModelAttribute

Spring mvc에서 요청 파라미터를 객체에 바인딩하기 위한 어노테이션

클라이언트로부터 전송된 요청 파라미터를 해당 객체의 프로퍼티에 자동으로 매핑

post 요청 & parameter DTO로 받기(@RequestBody) & DTO 객체 리턴

const ex07Fn = () => {
  const val1 = "Hello SpringBoot!!";
  const params = {
      "param1": val1,
      "param2": "안녕"
  }

  $.ajax({
    type: "post",
    url: "/ex07",

    // parameter 전달하기
    data: JSON.stringify(params),
    contentType: "application/json",

    // 요청이 성공했을 때 실행되는 부분
    success: function(res){
      console.log("성공", res);
    },

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

json 데이터로 전송하려면 contentType 명시해줘야함 !

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

클라이언트가 JSON 형태로 보내는 데이터가 aAjaxDTO 객체로 매핑

이후 @ResponseBody를 통해 다시 json 으로 응답

*RequestBody

클라이언트가 전송한 HTTP 요청 본문의 데이터를 Java 객체로 변환해주는 역할.

주로 JSON 형태의 데이터를 받아 처리할 때 사용

post 요청 & parameter 전달하기 & List 객체 리턴하기

const ex08Fn = () => {
  const val1 = "Hello SpringBoot!!";
  const params = {
      "param1": val1,
      "param2": "안녕"
  }

  $.ajax({
    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() {
      console.log("실패");
    }
  })
}

임의의 List 생성

DTOList() 메서드는 DB 연결 없이 임의의 AjaxDTO 객체 두 개를 포함한 리스트를 생성

클라이언트로부터 JSON 데이터가 POST 요청으로 들어오면,

@RequestBody AjaxDTO ajaxDTO를 통해 JSON이 AjaxDTO 객체로 변환

DTOList()로 만든 기존 리스트에 이 ajaxDTO 객체를 추가

// db 연결없어서 임의의 list 생성
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;
}

post 요청 & parameter 전달하기 & ResponseEntity에 DTO 객체 리턴하기

    @PostMapping("/ex09")
    public ResponseEntity ex09(@RequestBody AjaxDTO ajaxDTO){ // 리턴타입 안써줘도됨
//        return new ResponseEntity<>(HttpStatus.NOT_FOUND); // 어떤 처리냐 에 따라서 요청처리 가능
//        return new ResponseEntity<>(HttpStatus.OK);
        // 데이터와 코드를 같이 보내겠다
        return new ResponseEntity<>(ajaxDTO, HttpStatus.OK);
    }

* ResponseEntity

HTTP 응답 전체를 제어할 수 있는 클래스, 응답 본문(body)뿐만 아니라, HTTP 상태 코드, 헤더 등을 포함하는 응답을 구성할수 있음

min99umin99u