Json데이터로 통신하기

1.Get요청

http://Localhost:8080/blog/user?username=ssar

특징 : body로 데이터를 담아 보내지 않음.

 

2.Post, Put ,Delete요청(데이터를 변경)

2-1데이터를 담아보내야할것이 많음.

2-2 form태그의 한계 -> get요청,post요청만 가능,데이터가 (key=value)로 날아감

2-3 그래서 자바스크립트로 요청을해야함 

 

통일: form태그보다 자바스크립트 ajax요청->데이터는 Json으로 통일

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

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

가령 get요청은 key=value이고 post요청중에 x-www-form-urlencoded (form태그를 만들어서 데이터 전송) 시에도 key=value 이기 때문에 이러한 데이터는 아래와 같이 함수의 파라메터로 받을 수 있다.

PostMapping("/home")
public String home(String username, String email){
	
    return "home";
}

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

4-1 스프링은 key=value 형태의 데이터를 오브젝트로 파싱해서 받아주는 역할도 한다.

** 이때 주의 할점은 setter가 없으면 key=value 데이터를 스프링이 파싱해서 넣어주지 못한다.

4-2 User DTO는 객체->생성자로인한 기본값이존재->  요청 파싱할때 필드보다 적게들어와도 괜찮

4-3 다만 컨트롤러에서 객체로 파싱할때  없는 필드를 넣으면 알아서 걸러준다.

 

class User {
	private String username;
    private String password;
    
    public String getUsername(){
    	return username;
    }
    
    public String getPassword(){
    	return password;
    }
    
    public void setUsername(String username){
    	this.username = username;
    }
    
    public void setPassword(String password){
    	this.password = password;
    }
    
}

PostMapping("/home")
public String home(User user){
	
    return "home";
}

5. key=value가 아닌 데이터는 어떻게 파싱할까?

 

json 데이터나 일반 text데이터는 스프링 컨트롤러에서 받기 위해서는 @RequestBody 어노테이션이 필요하다.

** 기본전략이 스프링 컨트롤러는 key=value 데이터를 파싱해서 받아주는 일을 하는데 다른 형태의 데이터 가령 json 같은 데이터는 아래와 같이 생겼다.

{
    "username":"ssar",
    "password":"1234"
}

이런 데이터는 스프링이 파싱해서 오브젝트로 받지 못한다. 그래서 @RequestBody 어노테이션을 붙이면 MessageConverter 클래스를 구현한 Jackson 라이브러리가 발동하면서 json 데이터를 자바 오브젝트로 파싱하여 받아준다.

PostMapping("/home")
public String home(@RequestBody User user){
	
    return "home";
}

6. form 태그로 json데이터 요청방법

key=value 데이터가 아니라 json데이터를 어떻게 전송할 수 있을까?

 

6-1 form태그로보내면 key와 value 데이터 3개가 &&로 묶여서 보내진다.

6-2

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>

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>