JSP
- ID 중복체크 버튼을 누르면 idcheck() 함수가 호출된다.
- Servlet으로 id 값을 파라메터로 가지고 get 방식으로 간다.
- 서버로 부터 받은 값을 JSON.parse 한 뒤 value(true/false)에 따라 if-else 문을 실행한다.
- 문자열을 +로 붙일 때는 이런 방식으로도 사용 가능하다!
let html = '<h4 style="color:';
if(obj.flag){
html += 'blue">사용 가능한 아이디</h4>';
} else {
html += 'red">사용 불가능한 아이디</h4>';
}
<%@ 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>
function idcheck(){
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let val = xhttp.responseText; // "{\"flag\":\"true or false\"}" -- 아무 의미 없는 문자열
let obj = JSON.parse(val); // {"flag":"true/false"} flag가 멤버변수로 있는 객체로 변환.
let html = '<h4 style="color:';
if(obj.flag){
html += 'blue">사용 가능한 아이디</h4>';
} else {
html += 'red">사용 불가능한 아이디</h4>';
}
let res = document.getElementById("res");
res.innerHTML = html;
}
let param = "?id=" + f.id.value;
xhttp.open("GET", "${pageContext.request.contextPath}/member/idcheckAjax"+param);
xhttp.send();
}
</script>
</head>
<body>
<h3>회원가입</h3>
<form name = "f" action="${pageContext.request.contextPath}/member/join" method="post">
<table border="1">
<tr><th>ID</th>
<td>
<input type="text" name="id">
<input type="button" value="id중복체크" onclick="idcheck()">
<span id="res"></span>
</td></tr>
<tr><th>PWD</th><td><input type="password" name="pwd"></td></tr>
<tr><th>NAME</th><td><input type="text" name="name"></td></tr>
<tr><th>EMAIL</th><td><input type="text" name="email"></td></tr>
<tr><th>가입</th><td><input type="submit" value="가입"></td></tr>
</table>
</form>
</body>
</html>
Servlet
- JSP에서 가져온 id 값으로 Service의 검색 메소드를 실행한다.
- 검색 결과를 boolean으로 받아 JSON 객체에 넣어 JSP에 보낸다.
boolean flag = (vo == null); // 중복되지 않으면(null이면) true, 중복이면 false
JSONObject obj = new JSONObject(); //JSON 객체 생성 == {}
obj.put("flag", flag);
@WebServlet("/member/idcheckAjax")
public class IdCheckAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
public IdCheckAjax() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
MemberService service = new MemberService();
MemberVo vo = service.getMember(id); // id로 검색
//id 중복여부 체크
// 비교 연산자는 리턴값이 t/f
boolean flag = (vo == null); // 중복되지 않으면(null이면) true, 중복이면 false
JSONObject obj = new JSONObject(); //JSON 객체 생성 == {}
obj.put("flag", flag); //객체에 하나의 키-값 쌍을 넣어줌. (map 처럼!)
String txt = obj.toJSONString(); // JSON 표기 형태의 문자열로 만들어줌. "{\"flag\":\"true or false\"}"
response.getWriter().append(txt);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}