[Spring Boot] AJAX (✅ 아이디 중복 체크)

AJAX 로 아이디 중복체크

AJAX 는 비동기 통신으로, 화면상에 변화를 주지 않고 특정 서비스를 실행할 수 있다.

우리가 회원가입을 할 때 중복되지 않은 아이디를 입력하기 위해 아이디 중복체크를 하게 되는데, 이때! ajax 방식이 아닌 form 방식으로 진행한다면 페이지가 새로고침되며 입력해둔 회원가입 내용이 다 삭제되게 된다.

그렇기 때문에 AJAX 방식을 사용해 회원가입 페이지에서 아이디 중복체크를 검사하는 기능을 만들어주는 것이 좋다!

🔽 view 에 ajax 추가하기

html

<form action="join.do" method="post">
	<table>
		<caption>회원가입</caption>
		<tr>
			<th>ID</th>
			<td>
				<input type="text" name="id"/>
				<button type="button" id="overlay">중복체크</button>
				<p id="result"></p>
			</td>
			<th colspan =2>
				<button type="button" onclick="join()">회원가입</button>
			</th>
	</table>
</form>

• overlay 버튼을 클릭하면 아이디 중복 체트
• join 버튼을 클릭하면 회원가입 진행

java script

<script>
	$('#overlay').click(function(){
		var id = $('input[name="id"]').val();
		console.log(id);
		$.ajax({
			type: 'get',
			url: 'overlay.do',
			data: {'id':id}, 
			dataType: 'JSON',
			success: function(data){
				console.log(data);
				if(data.overlay>0){
					$('#result').html(id + '는 이미 사용중입니다.');
				}else{
					$('#result').html(id + '는 사용가능합니다.');
				}
			},
			error:function(e){
				console.log(e);
			}
			
		})
	});
</script>

• data.overlay 가 0 이상일 경우 이미 id가 존재하는 것으로 이미 사용중인 아이디라고 표기해준다.

🔽 controller

@GetMapping(value="/overlay.do")
@ResponseBody
public Map<String, Object> overlay(String id){
		
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("overlay", member_service.overlay(id));
	return map;
}

• @ResponseBody : ajax 와 연결하기 위해 선언해주는 어노테이션
• JSON 형태로 데이터가 들어오기 때문에 Map 형태로 받아준다.

🔽 service & dto

service

public Object overlay(String id) {
	return member_dao.overlay(id);
}

dto

int overlay(String id);

🔽 mapper

<select id="overlay" resultType="int">
	SELECT COUNT(id) FROM member WHERE id = #{param1} 
</select>

• int로 값을 리턴하기 때문에 count로 id의 수를 얻어준다.

---

이렇게 작성해주면 회원가입 페이지에서 아이디 중복체크를 진행할 수 있고, 중복체크 버튼을 클릭해도 이미 입력해둔 내용에 변동이 생기지 않는다.

---

하지만 여기까지만 작성해줄 경우 아이디 중복체크를 하지 않더라도 회원가입 버튼을 누를 경우 다음 페이지로 이동하게 된다.

join 버튼을 눌렀을 때 아이디 중복 체크의 값이 true일 경우에만 가능하도록 script 코드를 수정해보자!

✨ 중복체크가 true일 경우 회원가입 완료하기

<script>

	var overlayPass = false;

	function join(){
		if(overlayPass){
		console.log('서버에 회원가입 요청');
		$('form').submit(); 
		}else{
			alert('아이디 중복체크를 진행하세요!');
		}
	}

	$('#overlay').click(function(){
		var id = $('input[name= "id"]').val();
		console.log(id);
		$.ajax({
			type:'get',
			url:'overlay.ajax',
			data:{'id':id},
			dataType:'JSON',
			success:function(data){
				console.log(data);
				
				if(data.overlay>0){                              
					$("#result").html(id+'는 이미 사용중입니다.');
					$("#result").css({'color' : 'red'});
				}else{
					overlayPass = true;
					$("#result").html(id+'는 사용 가능합니다.');
					$("#result").css({'color' : 'green'});
				} 
			},
			error:function(e){
				console.log(e);
			}
		});
	});
</script>

• overlayPass 변수를 선언하고 아이디 중복체크 여부에 따라 true / false 값을 준다.
• overlayPass 가 true 이면 $('form').submit() 으로 form을 서버로 던져준다.
• overlayPas 가 false 이면 즉, 중복체크를 안했거나 중복된 아이디로 가입하려고 할 경우 alert() 로 안내를 해준다.
• ajax 에서 중복된 아이디가 0이하일 경우 (else) overlayPass 를 true로 바꿔준다.