<spring> get, post

1. 주소창에 study/page 라는 요청이 들어오면 해당 메소드(페이지응답)실행됨

@GetMapping("/study/page")
public String 페이지응답(){
    return "page_study";
}

template 안의 page_study.html 찾아서 실행함

 

2. @ ResponseBody 달게 되면

@ResponseBody
@GetMapping("study/text")
public String 문자열데이터응답() {
    return "문자열로 응답";
}

응답시 return 값(문자열로 응답) 을 페이지에 띄워 줌 

 

3.

@ResponseBody
@GetMapping("/study/text/2")
public String 요청데이터Params(String data1, int data2){
    return "문자열" + data1 + ", 숫자" + data2;
}

주소창에 localhost:8000/study/text/2?data1=aaa&data2=987 이라고 요청하면 return 값을 페이지에 띄워줌

 

4.

@ResponseBody
@GetMapping("/study/text/3")
public RequestStudyDto 요청데이터Obj(RequestStudyDto requestStudyDto){
    return requestStudyDto;
}

클래스를 만들어서 해당 객체를 parameter로 넣어주고

주소창에서 요청하면 return 값을 페이지에 띄워줌

 

** 페이지에서 요청받기 위해서는 @Responsebody 를 붙여야한다.

 

5.

@ResponseBody
@PostMapping ("/study/student/1")
public String getJsonAjax(@RequestBody RequestStudyDto requestStudyDto){
    return requestStudyDto.toString();
}

const button1 = document.querySelector(".button1");

button1.onclick = () =>{
    let student = {
        name: "heymin",
        email: "gpals5987@naver.com",
        address: "우리집"
    }

    $.ajax({
        async: false,
        type: "post",
        url: "/study/student/1",
        contentType: "application/json",
        data : JSON.stringify(student),
        dataType: "text",
        success: response => {
            alert(response);
        },
        error: response => {
            alert("요청실패");
        }

    })
        
    }

버튼을 찾아서(queryselector) -> 각 값을 넣고 -> 자바 스크립트 값을 json 객체로 변경(JSON.stringify) ->

 url로 보냄(type: post) //

Controller 에서 @requestbody로 받아서 바로  return 함 -> success or fail 로 이동 -> return 값이 response에 해당

 

6.

@ResponseBody
@GetMapping("/study/student/2")
public Object getJsonAjax2(){
    RequestStudyDto requestStudyDto = new RequestStudyDto();
    requestStudyDto.setName("hyemin");
    requestStudyDto.setEmail("gpals5987@naver.com");
    requestStudyDto.setAddress("우리집");

    return requestStudyDto;
}

const button2 = document.querySelector(".button2");
button2.onclick = () =>{
    $.ajax({
        async: false,
        type: "get",
        url: "/study/student/2",
        dataType: "json",
        success: response => {
            alert(JSON.stringify(response));
        },
        error: response => {
            console.log("실패함");
        }
    })
}

5번과 같지만 json 객체로 왔기에  response그대로 alert 시 object로 표현되므로

JSON.stringify (response) 후에 띄워주었다