GET 요청은 전송할 데이터를 HTTP 메시지의 body에 담지 않고 쿼리스트링으로 정보를 전달한다.
POST, PUT, DELETE 요청은 전송할 데이터를 쿼리스트링에 담지 않고 HTTP 메시지의 body에 담아 보낸다.
HTML태그의 <form>태그는 POST방식으로밖에 보낼 수 없다.
PUT, DELETE요청을 위해 자바스크립트 Ajax요청과 JSON 데이터타입으로 통일을 하도록 하는것이 좋다.
스프링 프레임워크에선 <form:form>태그를 사용하여 POST, PUT, DELETE를 요청할 수 있다.
스프링 컨트롤러 파싱 전략
1.
key=value 데이터를 자동으로 파싱하여 변수에 담아준다. key-value 대응구조의 쿼리스트링을 가진 GET요청과 form의 형태로 전송되는 x-www-form-urlencoded방식의 POST요청에도 key=value로 대응되기 때문에 파싱하여 함수의 파라미터로 받을 수 있다.
@PostMapping("/foo")
public String changeSomething(String firstParam, int secondParam){
...
}
Java
복사
2.
key=value의 데이터를 오브젝트로 파싱하여 함수의 파라미터를 객체의 형태로 받을수도 있다. 주의해야할 점은 setter가 존재해야 하며, key와 객체 내에 선언된 변수 이름이 같아야한다.
@Data //Getter, Setter, ToString, EqualsAndHashCode, RequiredArgsConstructor
public class Cocktail(){
private String base;
private String juice;
private String garnish;
}
@PostMapping("/fancybar")
public String GetOverHereBartender(Cocktail order){
...
}
Java
복사
3.
key=value가 아닌, text나 JSON 형식의 데이터를 파싱하기 위해선 @RequestBody가 필요하다. 어노테이션을 붙이면 MessageConverter 클래스를 구현한 Jackson 라이브러리가 데이터를 자바 오브젝트로 파싱하여 전달해준다.
//받을 데이터
//{
// "base" : "bourbon whiskey",
// "juice" : "soda",
// "garnish" : "orange peel"
//}
@PostMapping("/fancybar")
public String GetOverHereBartender(@RequestBody Cocktail order){
...
}
Java
복사
4.
form태그로 JSON 데이터를 전달하는 방법도 있다.
join.jsp
<div class="container">
<form>
<div class="form-group">
<label for="username">유저네임</label>
<input type="text" id="username">
</div>
<div class="form-group">
<label for="password">패스워드</label>
<input type="password" id="password">
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" id="email">
</div>
</form>
<button id="join--submit" class="btn btn-primary">회원가입</button>
</div>
<script src="/js/join.js"></script>
HTML
복사
join.js
<script>
$('#join--submit').on('click', function() {
var data = {
username : $('#username').val(),
password : $('#password').val(),
email : $('#email').val()
};
$.ajax({
type : 'POST',
url : '/user/join',
data : JSON.stringify(data),
contentType : 'application/json; charset=utf-8',
dataType : 'json'
}).done(function(r) {
if (r.statusCode == 200) {
console.log(r);
alert('회원가입 성공');
location.href = '/user/login';
} else {
if (r.msg == '아이디중복') {
console.log(r);
alert('아이디가 중복되었습니다.');
} else {
console.log(r);
alert('회원가입 실패');
}
}
}).fail(function(r) {
var message = JSON.parse(r.responseText);
console.log((message));
alert('서버 오류');
});
});
</script>
HTML
복사
