게시판 회원가입 중복확인하기

15 Dec 2020 in Web Dev on Java Spring

◇ Ajax 포스팅 시리즈 ◇

javascript 섹션에 있는 게시판을 수정하면서 진행한다.
ajax와 jquery 이용할 것이라서 jquery-3.5.1.min.js를 script 폴더에 추가해주고,ajax dependency도 pom.xml 에 넣어준다.
id 중복확인, email 중복확인을 하는 법은 너무 비슷해서 email 중복확인만 설명하기로 한다.

EMAIL 중복확인 하기

email 부분의 jsp 코드다. id를 “email”로 줘 jquery와 연결할 수 있게 한다.

<tr><th>Email</th>
<td><input type="email"  name ="email" id="email" required>
<span id = "emailcheck"></span></td></tr>

jquery 코드다.
- $(function(){})에 넣어서문서가 모두 로드 된 후에 코드를 실행할 수 있게 한다.
- .on(‘keyup’,함수이름)을 써 keyup 이라는 이벤트가 실행될 때 마다 emailcheck 라는 함수가 실행되게 해준다. 이때 주의할 점은, emailcheck()가 아니라는 점! ()는 빼고 함수 이름만 써줘야한다.
```
$(function(){
	$("#email").on('keyup',emailcheck);
})
```
emailcheck 함수는 다음과같다.
- email에 있는 입력값을 가져와서 sendData에 저장한다.
- $.ajax({method, url,data,success})로 서버에서 새로고침없이 데이터를 가져온다.
- 만약 서버 resp가 fail이면, 이메일이 중복이라는 것이고, fail이 아니면 사용가능한 이메일이라는 것이다.

$.ajax({url : ‘emailcheck’ method:’POST’}) 이 부분에서 알 수 있듯이, controller객체에서 @ResponseBody와 @RequestMapping(value=”/emailcheck”,method = RequestMethod.POST)가 붙은 함수가 실행된다.

function emailcheck(){
    var email = $("#email").val();
    var sendData = {"email":email}
    $.ajax({
        method : 'POST',
        url : 'emailCheck',
        data : sendData,
        success : function(resp){
            if(resp=='fail'){
                $('#emailcheck').css('color','red')
                $('#emailcheck').html("사용할 수 없는 이메일입니다.")
                flag=false;

            }else{
                $('#emailcheck').css('color','blue')
                $('#emailcheck').html("사용할 수 있는 이메일입니다.")
                flag=true;
            }}
    })
}

controller객체에서 emailcheck함수는 다음과 같다.

repository에서 만약 member객체를 반환한다면, 이미 그 email 을 가진 사람이 있다는 것이다.

@ResponseBody
@RequestMapping(value="/emailCheck", method= RequestMethod.POST)
public String emailCheck(Member member){
    //select * from member where userid = #{};
    //이 member 객체에는 id만 값이 들어있고, 다른 것은 다 null 값이다.
    Member m = repository.emailCheck(member);
    String message=null;
    if(m==null) {//사용할 수 있다. db에서 찾았는데없으니까
        message = "success";
    }else {//사용할 수 없다.
        message ="fail";
    }
    return message;
}

repository 객체에서 emailcheck 함수는 다음과 같다.

public Member emailCheck(Member member) {
    MemberMapper  mapper = session.getMapper(MemberMapper.class);
    Member m =	mapper.emailCheck(member);
    return m;
}

원래 interface가 설계도라서 interface에 먼저 함수 이름을 등록해놓고 mapper, repository, controller 등 그 후에 implement 하는 형식으로 가는데 emailcheck는 나중에 추가된 함수라서 interface에 지금 등록해준다.
interface에서 emailCheck는 다음과 같다. (등록만)
```
public Member emailCheck(Member member);
```

mapper 에서 emailcheck는 다음과 같다.

<select id ="emailCheck" parameterType="Member" resultType="Member">
    SELECT
    userid
    , userpwd
    , gender
    , email
    ,phone
    ,hobby
    ,to_char(birth,'YYYY-MM-DD') as birth
    , address
    FROM
    member
    WHERE
    email= #{email}
</select>

이렇게 하면, 실시간으로 DB를 확인하면서 사용자에게 이메일이 중복인지 아닌지 보여줄 수 있다!

게시판 회원가입 중복확인하기

EMAIL 중복확인 하기

Yeji 'Callie'

Error

EMAIL 중복확인 하기

Templates (for web app):

Error