Spring) Json 데이터로 통신

스프링 공부하면서 form 이용해서 보내는 것 말고 어떤 식으로 데이터를 자바스크립트에서 스프링으로 보내는지 궁금해서 찾아보았다.

Http 요청 방식

1. Get 요청

• Body가 아닌 주소에 데이터를 담아 보내는 형태
• key = value 형식
• DB에는 select 문

2. Post,Put,Delete 요청

• http body에 데이터를 담아 보내는 형태
• 데이터를 변경 시 사용
• 요청별 쿼리문
  • Post 요청 : insert
  • Put 요청 : update
  • Delete 요청 : delete

-> form 태그는 Get,Post 방식 뿐이 사용을 못한다

3. 해결방법

• 자바스크립트로 ajax 요청 + 데이터는 json으로 통일

---

스프링 컨트롤러의 파싱 전략

Key = value 형식 데이터

• get 요청 : key=value 형식
• post 요청(form 태그로 post) : (x-www-form-urlencoded) -> key=value 형태

1. 스프링 컨트롤러는 key=value 데이터를 자동으로 파싱하여 변수에 담아준다.

// ex. {username = dokun , email = dokun@gg.gg}
//@GetMapping
@PostMapping
public String home(String username,String email){ // key와 value가 매핑된다
	System.out.println(username); // dokun
        System.out.println(email); // dokun@gg.gg
	return "home";
}

2. key=value 형태의 데이터를 object로 파싱해서 받아줄 수도 있다.

• DTO

@Setter // setter가 없으면 object로 파싱이 불가능하다.
@Getter
class User {
	private String username;
    	private String email;
   	private String age;
}

• Controller

@PostMapping
public String home(User user){ // User object로 데이터를 받는다.
	System.out.println(user.getUsername); // dokun
        System.out.println(user.getEmail); // dokun@gg.gg
        System.out.println(user.getAge); // null -> 값이 없으면 null로 받아진다.
	return "home";
}

key=value가 아닌 데이터

@RequestBody 이용

• json 데이터의 경우 key=value가 아니기 때문에 Jackson 라이브러리의 @RequestBody 어노테이션을 이용해서 자바 오브젝트로 파싱한다.

• json 형식 데이터

{
	"username":"dokun",
        "email":"dokun@gg.gg"
}

• Controller

PostMapping("/home")
public String home(@RequestBody User user){
	System.out.println(user.getUsername); // dokun
        System.out.println(user.getEmail); // dokun@gg.gg
    return "home";
}

---

form 태그로 json 데이터 요청(ajax)

• join.html

<div class="container">

	<form>
		<div class="form-group">
			<label for="username">유저네임</label> 
			<input type="text" id="username">
		</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>

• join.js

$('#join--submit').on('click', function() {
	let 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('서버 오류');
	});
});

reference : https://getinthere.tistory.com/