회원 가입을 할 때 아이디를 생성하게되는데 이때 기존의 사용자와 아이디를 겹치지 않게 해야한다. 이때, 사용하는 중복체크 로직이다.
1.fetch방식 사
// 아이디 중복 체크
@RequestMapping(value = "/CheckDuplication", method = RequestMethod.GET)
@ResponseBody
public String checkDuplication(String userid) {
UserVo user = userMapper.getUser(userid); // DB에서 해당 아이디로 조회
if (user == null) {
return "가능"; // 아이디가 존재하지 않으면 가능
}
return "불가능"; // 아이디가 존재하면 불가능
}
이때, String userid는 jsp파일에서의 name속성과 이름이 일치해야한다.
const useridEl = document.querySelector('[name=userid]');
const checkDuplicationEl = document.querySelector('#checkDuplication');
checkDuplicationEl.onclick = function() {
const useridInput = useridEl.value.trim(); // 공백 제거
console.log('User ID Input:', useridInput); // Debugging line
if (useridInput == '') {
alert("아이디를 입력하세요");
useridEl.focus();
return;
}
//url='https://localhost:9090/Users/CheckDuplication?userid=${useridInput}'
fetch('/Users/CheckDuplication?userid=' + useridInput)
.then((response) => response.text())
.then((data) => {
if (data.trim() == "가능") {
alert('사용 가능한 아이디입니다.');
checkDuplicationEl.setAttribute("data-checked", "true"); // 중복 확인 성공 시 표시
} else {
alert('이미 존재하는 아이디입니다.');
checkDuplicationEl.setAttribute("data-checked", "false");
}
})
.catch(error => {
console.error('Error during duplication check:', error);
});data-checked: HTML5 표준에서 data-로 시작하는 속성을 사용하여 사용자 정의 데이터를 저장할 수 있다.
checkDuplicationEl.dataset.checked = "true";
이렇게 바꿔서 작성할 수도 있다.
2. 새 창 방식 중복 확인
// /Users/DupCheck?userid=sky
@RequestMapping("/DupCheck")
public ModelAndView dupCheck(UserVo vo) {
// 중복확인을 위한 조회
UserVo userVo = userMapper.getUser2(vo);
// 결과를 새창에 출력할 jsp 를 리턴
ModelAndView mv = new ModelAndView();
mv.setViewName("users/dupcheck"); // 새창에 보여줄 jsp
mv.addObject("userVo", userVo); // 새창에 보여줄 결과
return mv;
}Controller
<style>
.green { color:green; }
.red { color:red; }
</style>
<body>
<main>
<form action="/Users/DupCheck" method="post">
<h2>Id 중복확인</h2>
<input type="text" name="userid" value="${ param.userid }" />
<input type="submit" value="검색" />
</form>
<div style="height:20px;"></div>
<c:choose>
<c:when test="${ userVo eq null }">
<p class="green">
${ param.userid }는 사용가능한 아이디입니다
<input type="button" id="btnClose" value="ID 사용하기" />
</p>
</c:when>
<c:otherwise>
<p class="red">${ param.userid }는 사용할 수 없는 아이디입니다</p>
</c:otherwise>
</c:choose>
</main>
<script>
const btnCloseEl = document.getElementById('btnClose')
btnCloseEl.onclick = function() {
// 넘겨줄 창의 userid 에 조회괸 결과를 보낸다
// 넘겨줄 창(내창을 open한 window) : window.opener -> mf
// 내창 : window -> cf
const mfUseridEl = window.opener.document.querySelector('[name=userid]');
const cfUseridEl = window.document.querySelector('[name=userid]')
mfUseridEl.value = cfUseridEl.value;
window.close();
}
</script>
</body>dupcheck.jsp
- param.userid: html창에서 입력한 userid를 form(DupCheck)으로 전송했을때, 그 userid값을 가져온다.
- <c:when> 블록 내에서 userVo가 null일 때 사용가능한 아이디이다. mybatis에서 가져온 userid에 userVo가 없는 것이다. 이때, form태그를 통해 입력받은 userid값이 /DupCheck로 전송된 것이다.
// 중복확인(새창) 버튼이 클릭되면
const dupCheckEl = document.querySelector('#dupCheck');
dupCheckEl.onclick = function() {
// 새창을 연다
let html = '/Users/DupCheck?userid=' + useridEl.value
// 새 창에 보여줄 html(jsp) 파일
let name = 'dupcheck'; // 이름을 주면 새창은 한번만 열림
let features = 'height=300,width=500,top=250,left=800';
window.open(html, name, features)
}write.jsp
3. ajax방식 중복확인
// http://localhost:9090/Users/IdDupCheck?userid=aaa
@RequestMapping(
value = "/IdDupCheck",
method = RequestMethod.GET,
headers = "Accept=application/json" ) // 결과를 json 으로 처리
@ResponseBody // json 문자열 리턴하겠다
public UserVo idDupCheck(String userid) {
String result = ""; // 조회결과
// db 조회
UserVo userVo = userMapper.idDupCheck( userid );
return userVo;
}@ResponseBody : jsp 파일명이 아닌 결과문자열(json)로 리턴한다.
// 중복확인 버튼이 클릭되면
const idDupCheckEl = document.querySelector('#idDupCheck');
let dupCheckClicked = false;
idDupCheckEl.onclick = function() {
// 아이디를 중복확인
dupCheckClicked = true;
}
$( function() {
$('#idDupCheck').on('click', function() {
$.ajax({
url : '/Users/IdDupCheck',
// data : '?userid=' + $('[name=userid]').val()
data : { userid : $('[name=userid]').val() }
// data : 넘겨주는 파라미터를 담는 변수
})
.done( function( data ) {
// data : 서버가 보내준 결과 (json)
console.log(data)
if( data == '' ) {
let html = '사용가능한 아이디입니다'; // + data.userid
dupCheckClicked = true;
$('#dupResult').html(html).addClass('green')
} else {
let html = '사용할수 없는 아이디입니다'
dupCheckClicked = false;
$('#dupResult').html(html).addClass('red')
}
})
.fail( function(err) {
console.log(err)
})
})
})let dupCheckedClicked: false로 초기화되어 있다. 이는 사용자가 아직 중복 확인을 하지 않았음을 나타낸다.
'SPRING' 카테고리의 다른 글
| [Spring] 페이징(Pagination) (0) | 2024.10.20 |
|---|---|
| [spring]회원정보 수정 - 비밀번호 체크하기 (0) | 2024.10.13 |
| [spring] 파라미터 다루기 (0) | 2024.10.10 |
| [spring]스프링 부트 MVC구조 (3) | 2024.10.08 |
| [spring] 스프링 부트 Controller (0) | 2024.10.08 |