@PathVariable
get 요청일 때 사용할 수 있습니다.
URL을 이용해서 값을 받아옵니다.
get 요청일 때는 Requeset Header의 content type은 존재하지 않습니다.
@RequestParam
RequestParam annotation은 get 요청과 post 요청 둘다 사용할 수 있습니다.
RequestParam은 생략이 가능합니다.
form 데이터 형식으로 request를 보냈을 때 RequestParam을 사용해서 받을 수 있으며
Json 형식을 사용해서 보낼때는 RequestParam을 사용할 수 없습니다.
GET 요청에서는 @RequestParam이 URL에서 값을 받아오며
POST 요청에서는 Request Body 부분에서 값을 받아오고 있습니다.
@ModelAttribute
post로 값을 보낼때는 항상 Request Body에 값이 존재합니다.
@ModelAttribute는 setter가 필요합니다.
form 데이터 형식으로 request를 보냈을 때 사용할 수 있는 어노테이션입니다.
@RequestBody
post로 값을 보낼때는 항상 Request Body에 값이 존재합니다.
Json 형태의 값을 받아올 때 사용합니다.
AJAX로 통신을 할 때, front에서 JSON 형태의 파일을 전달해 주는데, 이때 사용하는 annotation입니다.
JSON으로 통신을 주고 받는 형태로 구축을 하는 경우가 많아지고 있는데 JSON 형태로 데이터를 주고 받으면 새로고침 없이 페이지의 구성값을 변경할 수 있습니다.
이를 한개의 페이지로 application을 구성할 수 있다고 해서 SPA라고 합니다.
확인할 수 있는 코드
<!DOCTYPE html>
<html>
<head>
<title>Hello Request</title>
</head>
<body>
<h2>GET /star/{name}/age/{age}</h2>
<form id="helloPathForm">
<div>
이름: <input name="name" type="text">
</div>
<div>
나이: <input name="age" type="text">
</div>
</form>
<div>
<button id="helloPathFormSend">전송</button>
</div>
<br>
<h2>GET /hello/request/form/param</h2>
<form method="GET" action="/hello/request/form/param">
<div>
이름: <input name="name" type="text">
</div>
<div>
나이: <input name="age" type="text">
</div>
<button>전송</button>
</form>
<br>
<h2>POST /hello/request/form/param</h2>
<form method="POST" action="/hello/request/form/param">
<div>
이름: <input name="name" type="text">
</div>
<div>
나이: <input name="age" type="text">
</div>
<button>전송</button>
</form>
<br>
<h2>POST /hello/request/form/model</h2>
<form method="POST" action="/hello/request/form/model">
<div>
이름: <input name="name" type="text">
</div>
<div>
나이: <input name="age" type="text">
</div>
<button>전송</button>
</form>
<br>
<h2>POST /hello/request/form/json</h2>
<form id="helloJsonForm">
<div>
이름: <input name="name" type="text">
</div>
<div>
나이: <input name="age" type="text">
</div>
</form>
<div>
<button id="helloJsonSend">전송</button>
</div>
<div>
<div id="helloJsonResult"></div>
</div>
</body>
<script>
// GET /star/{name}/age/{age}
const helloPathForm = document.querySelector("#helloPathFormSend")
helloPathForm.onclick = (e) => {
const form = document.querySelector("#helloPathForm");
const name = form.querySelector('input[name="name"]').value;
const age = form.querySelector('input[name="age"]').value;
const relativeUrl = `/hello/request/star/${name}/age/${age}`;
window.location.href = relativeUrl;
}
// POST /hello/request/form/json
const helloJson = document.querySelector("#helloJsonSend")
helloJson.onclick = async (e) => {
const form = document.querySelector("#helloJsonForm");
const data = {
name: form.querySelector('input[name="name"]').value,
age: form.querySelector('input[name="age"]').value
}
const response = await fetch('/hello/request/form/json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
const text = await response.text(); // read response body as text
document.querySelector("#helloJsonResult").innerHTML = text;
};
</script>
</html>package com.sparta.springadvance;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@RequestMapping("/hello/request")
public class HelloRequestController {
@GetMapping("/form/html")
public String helloForm() {
return "hello-request-form";
}
// [Request sample]
// GET http://localhost:8080/hello/request/star/BTS/age/28
@GetMapping("/star/{name}/age/{age}")
@ResponseBody
public String helloRequestPath(@PathVariable String name, @PathVariable int age)
{
return String.format("Hello, @PathVariable.<br> name = %s, age = %d", name, age);
}
// [Request sample]
// GET http://localhost:8080/hello/request/form/param?name=BTS&age=28
@GetMapping("/form/param")
@ResponseBody
public String helloGetRequestParam(@RequestParam String name, @RequestParam int age) {
return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
}
// [Request sample]
// POST http://localhost:8080/hello/request/form/param
// Header
// Content type: application/x-www-form-urlencoded
// Body
// name=BTS&age=28
@PostMapping("/form/param")
@ResponseBody
public String helloPostRequestParam(@RequestParam String name, @RequestParam int age) {
return String.format("Hello, @RequestParam.<br> name = %s, age = %d", name, age);
}
// [Request sample]
// POST http://localhost:8080/hello/request/form/model
// Header
// Content type: application/x-www-form-urlencoded
// Body
// name=BTS&age=28
@PostMapping("/form/model")
@ResponseBody
public String helloRequestBodyForm(@ModelAttribute Star star) {
return String.format("Hello, @RequestBody.<br> (name = %s, age = %d) ", star.name, star.age);
}
// [Request sample]
// POST http://localhost:8080/hello/request/form/json
// Header
// Content type: application/json
// Body
// {"name":"BTS","age":"28"}
@PostMapping("/form/json")
@ResponseBody
public String helloPostRequestJson(@RequestBody Star star) {
return String.format("Hello, @RequestBody.<br> (name = %s, age = %d) ", star.name, star.age);
}
}
ModelAttribute는 Setter가 필요한데 RequestBody는 Setter가 필요없는 이유
@RequestParam, @RequestBody에 관한 이슈 (Conversion 관점) - 배종진
Conversion관점의 @RequestParam와 @RequestBody에 관한 이슈에 대해서 다루어 보도록 하겠다.Form Datawriter=abc&title=Spring&contents=JohnsonDomain ClassController 코드 일부적절한 For
velog.io
SPA의 장단점
https://dev-dain.tistory.com/46
SPA(Single Page Application) 알아보기
SPA(Single Page Application)가 붐이다 이런 소리 많이 듣긴 했지만 SPA가 뭔지는 제대로 모르고 있었다. 시간이 남아서 여러 번 검색한 김에 나중에 까먹을 때 보려고 정리한다. SPA란? SPA란 쉽게 말해 1
dev-dain.tistory.com