코딩항해기
[실습/Spring] 비동기(ajax) id 중복 검사 구현하기 본문
현재 실습 테이블에서 id값을 PK로 사용하고 있으므로 중복된 아이디로 회원가입을 시도하면 false가 뜰 수 밖에 없다.
이러한 상황을 미리 방지하기 위해 유효값 검사(id 중복검사)를 통해 미리 사용자에게 고지할 수 있다.
해당 기능을 구현할 예정이며, id 중복검사를 통과하지 못했을 시에는 회원가입을 진행할 수 없도록 한다.
먼저 회원가입을 진행할 페이지가 필요하다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<%--jquery CDN--%>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/checkId.js"></script>
</head>
<body>
<form action="join.do" method="POST">
<table border="1">
<tr>
<td>아이디</td>
<td>
<input id="mid" type="text" name="mid" required>
<!--결과-->
<span id="result"></span>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" required></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="회원가입"></td>
</tr>
</table>
</form>
</body>
</html>
ajax를 사용할 예정이기 때문에 jquery CDN을 추가했으며, 외부 js에서 작업할 수 있도록 script 태그를 추가했다.
id를 사용할 수 있는 지 없는 지를 띄워줄 결과 span 태그를 input 태그 옆에 추가했다.
그 다음으로는 먼저 Controller 작업을 진행했다.
checkId.do 요청을 하면 현재 전달된 값이 사용 가능한지, 아닌지를 text로 반환하는 Controller이다.
@RestController
@Slf4j
public class CheckController {
@Autowired
private MemberService memberService;
//비동기 아이디 중복체크
@RequestMapping("/checkId.do")
public @ResponseBody String check(MemberDTO memberDTO) {
log.info("log: /check.do start");
String result = "false"; //반환할 결과
//DB 조회
memberDTO.setCondition("CHECK_ID");
if(memberService.selectOne(memberDTO) != null){
result = "true";
}
log.info("log: /check.do end result : [{}]", result);
return result;
}
}
해당 컨드롤러는 비동기를 진행하므로 @RestController 어노테이션과 @ResponseBody 어노테이션을 통해 ViewResolver에게 페이지 이동이 필요없음을 알려준다.
(DAO 생략)
이제 비동기 통신으로 보낼 데이터와 연결할 url과 받아오는 데이터 타입, 받아오는 데이터 구분법이 모두 정해졌다.
해당 url와 받아오는 데이터를 사용해 ajax를 구성할 수 있다.
$(document).ready(function(){
const $submit = $('input[type="submit"]'); //전송버튼
$submit.prop('disabled', true); //기본값 설정
$('#mid').on('change', function(){
const mid = $(this).val().trim();
$(this).val(mid);//공백제거
console.log("mid ["+mid+"]");
if(mid){//입력된 값이 있을경우
//비동기 통신
$.ajax({
url: 'checkId.do',
type: 'POST',
data: {mid : mid}, //mid 전달
success: function (data) {
console.log("data [" + data + "] type [" + typeof data + "]");
if (data === 'true') {
//중복된 아이디 (DB에 있는 데이터)
$('#result').text('사용불가능한 id 입니다.').css('color', 'red');
$submit.prop('disabled', true); //전송불가
} else {
//사용가능한 아이디
$('#result').text('사용가능한 id 입니다.').css('color', 'blue');
$submit.prop('disabled', false); //전송 허용
}
},
error: function (error) {
console.log('mid check ajax failed');
console.log(error);
}
})
}
else {//입력된 값이 없을 경우
//초기화
$('#result').text('');
$submit.prop('disabled', true); //전송불가
}
})
})
페이지가 로딩이 완료되면 그 때 객체를 찾아 submit을 비활성화한다.
mid input태그에 변화가 생기면 먼저 mid에 있는 양쪽 공백을 제거하는 메서드를 실행해 input태그에 반영하고,
값에 따라 비동기를 진행하거나 결과를 출력하는 태그를 초기화한다.
비동기 통신은 앞서 작성한 Controller로 데이터를 보내게 되며 사용 가능한 아이디인지, 아닌지를 구분해 해당 결과를 클라이언트에게 안내하며 전송버튼을 활성화, 비활성화한다.
초기 상태
사용 가능한 아이디
사용 불가능한 아이디
'problem solving > 과제&실습 코딩' 카테고리의 다른 글
| [실습/Spring] AOP 활용 로그 작성 (1) | 2024.10.17 |
|---|---|
| [실습/Spring] 검색 기능 비동기(ajax)로 변경하기 (2) | 2024.10.14 |
| [과제/Spring] 수업 실습 코드에 게시글 검색 추가하기 (0) | 2024.10.10 |
| [과제/Spring] 게시글 기능 구현하기 (7) | 2024.10.09 |
| [과제/Spring] board insert 구현하기 (0) | 2024.10.07 |
