스프링에서 JSON 을 쓰기 위해서는 Map으로 리턴해야 한다!
void (String id, Map map) 이런 식으로 파라메터로 지정하니까 안됨,,
리턴타입을 Map으로 하고 HashMap 선언하고 return map 이런 식으로 해야 JSON으로 인식하는듯??
// id 중복체크
@ResponseBody // 응답 데이터를 직접 반환하겠다.
// JSON 형태 응답 보내기 위해 -> Map으로 리턴~
@PostMapping("/idcheck")
//@RequestParam("id") 쓰지 않아도 입력양식 이름과 같게 적으면 파라메터값 읽어올 수 있음.
public Map idcheck(String id) {
MemberVo mvo = service.getMember(id);
boolean flag = (mvo == null);
Map map = new HashMap(); // Map 하나 당 {}
map.put("flag", flag); // {"flag", true(or false)}
return map;
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#b1').click(function(){
$.ajax({
url: '/member/idcheck',
type: 'post',
data: {'id':$('#id').val()}, // 전송할 데이터 -- id 라는 파라메터 이름으로 감~
dataType: 'json', // 응답 데이터 타입
success:function(result){ //result : json 형태로 받아오니까 배열.
let txt = '<h4 style="color:';
if(result.flag){
txt += 'blue">사용 가능한 아이디</h4>';
} else {
txt += 'red">사용 불가능한 아이디</h4>';
}
$('#res').html(txt);
},
error:function(req, status){
alert(status);
}
});
});
});
</script>
</head>
<body>
<h3>회원가입</h3>
<form action="/member/join" method="post">
id:<input type="text" name="id" id="id"><input type="button" value="id중복체크" id="b1">
<span id="res"></span><br/>
pwd:<input type="password" name="pwd"><br/>
name:<input type="text" name="name"><br/>
email:<input type="text" name="email"><br/>
<input type="submit" value="가입"><br/>
</form>
</body>
</html>