[Spring] @RequestBody

프론트엔드에서 AJAX 요청을 할 때 데이터가 직렬화 되어 형식이 JSON으로 된다.

이 JSON 데이터를 @RequestBody가 Java객체로 역직렬화하여 Http요청 본문을 DTO인 Java객체로 mapping할 수 있게 한다.

그리고 돌아온 응답을 토대 window.location.href를 이용해 페이지를 이동할 수 있다.

 

사용 코드

 

Controller

// ...
@RequestMapping(value = "/loginFail")
public String loginFail() {
	return "/web/common/loginFail";
}

@RequestMapping(value = "/main")
public String mainPage() {
	return "/web/common/main";
}

@RequestMapping(value = "/login")
public String test() {
	return "web/common/login";
}

@ResponseBody
@RequestMapping(value = "/ajax/loginProcess", method = RequestMethod.POST)
public Map<String, Object> confirmLogin(@RequestParam String email, @RequestParam String password) {
	Map<String, Object> result = new HashMap<>();
	int accountCnt = memberService.vaildMember(email, password);
	if (accountCnt != 1) {
		result.put("status", "fail");
	} else {
		result.put("status", "success");
	}
	return result;
}
// ...

 

jsp

<!-- ... -->
<div>
	<h3 style="width:100%;text-align:left;"><b>로그인</b></h3>
	<form role="form" id="loginFrm" name="loginFrm" method="post" action="#" onsubmit="return false">
		<div>
			<label for="exampleInputEmail">Email</label>
			<div>
				<input type="text" id="email" name="email" value="" placeholder="Email">
			</div>
		</div>
		<div>
			<label for="exampleInputPassword">Password</label>
			<div>
				<input type="password" id="password" name="password" value="" placeholder="PW">
			</div>
		</div>
		<div>
			<button type="button" id="loginBtnImg">LOGIN</button>
		</div>
	</form>
</div>
<!-- ... -->

 

Javascript

// ...
const serializedValues = $('#loginFrm').serializeObject();
$.ajax({
	type: 'POST',
	url: '/ajax/loginProcess',
	cache: false,
	data: serializedValues,
	success: function (response) {
		if (response.status === 'success'){
			window.location.href = '/main';
		} else {
			window.location.href = '/loginFail';
		}
	}
});
// ...