<스프링 부트 Spring boot> Ajax 아이디 중복확인 기능 구현

- 아이디 중복확인

Ajax를 통해 페이지 이동 없이 해당 페이지 내에서 아이디 중복확인만 실행이 가능하다. 순서는 다음과 같다.

 

1) 회원가입 폼에 아이디 입력 후 아이디 중복확인을 할 수 있는 버튼을 만든다.

<form name="join" method="post" action="join" autocomplete="off" encType="utf-8">
	<h3>아이디</h3>
	<input type="text" id="user_id" name="id" placeholder="4자이상" minlength="4" maxlength="15" required autofocus required>
	<button id="overlappedID" type="button">중복확인</button><br>
	<span id="olmessage"></span>
	<!-- 중략 -->
</form>

이 때, 버튼을 만들되 버튼에 속성값으로 type="button"으로 한 번 더 명시해준다. 일반적으로 버튼은 submit의 기능을 포함하고 있기 때문에, 이 속성값을 설정하지 않으면 회원가입 폼의 전체 내용을 submit 하는 마지막 회원가입 버튼과 기능이 혼재되어 나타날 수 있기 때문이다. 따라서 submit이 중첩되지 않게, 아이디 중복확인의 버튼에는 submit 기능이 포함되지 않고 오직 button 기능만 할 수 있도록 해당 속성값을 추가해준다.

 

추가적으로 css는 다음과 같이 작성해주었다.

#overlappedID {background-color: GhostWhite; width: 15%; height: 40px;}
.olmessagef {color: red; font-style: Italic;}
.olmessaget {color: blue; font-style: Italic;}

#overlappedID는 중복확인 버튼에 효과를 준 것이고, .olmessagef와 olmessaget는 각각 아이디 중복확인 후 나타낼 문구에 대해 색상값을 다르게 준 것이다. .olmessagef는 중복된 아이디일 경우 빨간색의 문구로, .olmessaget는 사용 가능한 아이디일 경우 파란색 문구로 나타낼 수 있도록 설정하였다.

 

 

2) 자바스크립트에 중복확인 버튼에 클릭 이벤트가 발생하면 실행될 함수를 만든다.

그리고 함수 내에서 ajax를 통해 아이디 중복확인 검사 기능을 구현한다.

	$("#overlappedID").click(function(){
		$("#signup").attr("type", "button");
		const id = $("#user_id").val();
		$.ajax({
		type: "get",
		async: false,
		url: "http://localhost:8080/member/idCheck",
		data: {id: id},
		success: function (data) {
		if(data == 1) {
			$("#olmessage").text("이미 사용중인 ID 입니다.");
			$("#olmessage").addClass("olmessagef");
			$("#olmessage").removeClass("olmessaget");
			}else {
			$("#olmessage").text("사용 가능한 ID 입니다.");
			$("#olmessage").addClass("olmessaget");
			$("#olmessage").removeClass("olmessagef");
			$("#signup").attr("type", "submit");
			}
			}
		})
		});

중복확인 버튼 클릭 이벤트 발생 시, 함수가 실행된다. 첫 번째로 먼저 회원가입 폼 작성 완료 후 submit하는 버튼인 #signup에 submit 기능을 갖고 있지 않은 순수한 button 값을 속성으로 추가한다. 이는 아이디 중복확인 검사 후 사용 가능한 아이디가 아닐 경우, 회원가입하는 것을 막기(?) 위해서다.

 

그리고 사용자가 입력한 값을 변수에 담아 이를 서버로 보낸다. url 주소가 명시된 서버로 data의 id 매개변수 값 id가 전달된다. 이 id는 방금 사용자가 입력한 값을 저장한 변수명이다. 

 

서버에서 처리가 성공적으로 완료되면, 작업을 수행하는데 if 조건문을 통해 서버로부터 받아온 데이터가 1이면(사용자가 입력한 아이디 값이 DB에 존재할 경우, 서버가 1을 보내준다) 이미 사용중인 ID로 판별한다. 이에 앞서 설명한 css 선택자를 통해 중복된 아이디임을 알리는 문구를 추가하고, 사용 가능한 아이디임을 알리는 문구를 가진 선택자는 지워준다. 이것을 지우지 않으면 두 문구가 함께 나타나게 되므로 하나는 add, 하나는 remove 하는 방법으로 만든다. 마찬가지로 사용 가능한 아이디일 때는 반대로 만들어준다. 그리고 추가로 이제 사용 가능한 아이디임이 확인되었으므로, 회원가입 버튼을 눌러 가입을 완료할 수 있도록 버튼에 submit 속성값을 추가해준다.

 

 

3) ajax가 중복확인을 위해 보낸 데이터를 컨트롤러가 받고, 컨트롤러는 이를 수행할 수 있도록 Service를 호출한다.

Service는 다시 Repository를, 그리고 Repository는 Mapper를 통해 값을 확인하고 다시 역순으로 확인한 값을 보내면 마지막으로 컨트롤러가 받아 이를 ajax로 보낸다.

	//1. Controller
    @ResponseBody // 값 변환을 위해 꼭 필요함
	@GetMapping("idCheck") // 아이디 중복확인을 위한 값으로 따로 매핑
	public int overlappedID(MemberVO memberVO) throws Exception{
		int result = memberService.overlappedID(memberVO); // 중복확인한 값을 int로 받음
		return result;
	}

	//2. Service
    public int overlappedID(MemberVO memberVO) throws Exception{
		int result = memberRepository.overlappedID(memberVO);
		return result;
	}

	//3. Repository
	public int overlappedID(MemberVO memberVO) throws Exception;

	<!-- 4. Mapper.xml -->
    <select id="overlappedID" parameterType="MemberVO" resultType="int">
		select count(id) From destudymember where id=#{id}
	</select>

1-2-3-4의 과정을 거친 후, 다시 4-3-2-1의 과정을 거쳐 ajax가 데이터를 받으면, 앞서 설명한 대로 ajax가 과정을 처리하여 중복확인한 값을 웹 브라우저에 출력한다.