Spring_Ajax_아이디 중복 확인

Spring

Spring_Ajax_아이디 중복 확인

climb-up 2022. 6. 14. 00:53

1) 아이디 중복확인 memberJoin.jsp

<head>
<style>
	span.guide{display: none; font-size: 12px; top: 12px; right: 10px;}
    span.ok{color: green;}
    span.error{color: red;}
</style>
</head>
<body>
	<h1 align="center">회원가입</h1>
    <div class="centerText">
    	<form action="minsert.me" method="post" id="joinForm">
        	<table>
            	<tr>
                	<th>* 아이디</th>
                    <td>
                    	<input type="text" name="id" id="userId">
                        <span class="guide ok">이 아이디는 사용 가능합니다.</span>
                        <span class="guide error">이 아이디는 사용할 수 없습니다.</span>
                        <input type="hidden" id="idDuplicateCheck" value="0"/>
                    </td>
                </tr>
                <tr>
		<td colspan="2" align="center">
			<button onclick="return validate();">가입하기</button>
			<input type="reset" value="취소하기">
			<button type="button" onclick="location.href='home.do'">시작 페이지로 이동</button>
		</td>
		</tr>
            </table>
        </form>
    </div>
    <script>
    	$('#userId').on('keyup', function(){
        	var userId = $(this).val().trim();
            
            if(userId.length < 4){
            	$('.guide').hide();
                $('#idDuplicateCheck').val(0);//아이디 중복확인을 했는지 확인여부
                return;
            }
            
            $.ajax({
            	url: 'dupId.me',
                data: {id:userId},
            	success: function(data){
                	console.log(data);
                    
                    if(data == '1'){
                    	$('.guide.error').show();
                    	$('.guide.ok').hide();
                        $('#idDuplicateCheck').val(0);
                    } else {
                    	$('.guide.error').hide();
                        $('.guide.ok').show();
                        $('#idDuplicateCheck').val(1);
                    }
                },
                error: function(data){
                	console.log(data);
                }
            })
        });
        
        function validate(){
        	if($('#idDuplicateCheck').val() == 0){
            	alert('사용 가능한 아이디를 입력해주세요.');
                $('#userId').focus();
                return false;
            } else {
            	$('#joinForm').submit();
            }
        }
    </script>
</body>

아이디 중복확인여부와 ajax를 사용한 비동기 통신으로 아이디 중복확인을 진행할 폼을 만든다.

2) MemberController

@RequestMapping("dupId.me")
public void duplicateId(@RequestParam("id") String id, HttpServletResponse response) {
	int result = mService.checkIdDup(id);
	
    try{
    	response.getWriter().print(result);
    } catch (IOException e){
    	e.printStackTrace();
    }
}

ajax를 사용. getWriter().print()를 사용하려면 HttpServletResponse response를 써줘야한다.

3) MemberService(interface)

public interface MemberService {
	int checkIdDup(String id);
}

4) MemberServiceImpl

@Service("mService")
public class MemberServiceImpl implements MemberService{
	@Autowired
    private MemberDAO mDAO;
    
    @Autowired
    private SqlSessionTemplate sqlSession;
    
    @Override
    public int checkIdDup(String id) {
    	return mDAO.checkIdDup(sqlSession, id);
    }
}

5) MemberDAO

@Repository("mDAO)
public class MemberDAO {

	public int checkIdDup(SqlSessionTemplate sqlSession, String id) {
    	return sqlSession.selectOne("memberMapper.checkIdDup", id);
	}
}

6)member-mapper.xml

<mapper namespace="memberMapper">
	<select id="checkIdDup" resultType="_int">
    	select count(*)
        from member
        where id = #{id}
	</select>
</mapper>