Spring 개발자 수업 105일차(2) - jQuery Ajax를 이용한 아이디 중복검사

jQuery Ajax를 이용한 아이디 중복검사

- 우리가 회원가입 양식이나, 여러가지 입력 폼을 만들었을 때 만약 중복검사를 하게 되면 페이지가 이동되어 이전에 작성 했던 내용이 사라지는 부분이 많이 불편했다. 이 점들을 보완해서 사용자가 바로바로 확인할 수 있도록 ajax를 이용해서 새로고침이 이루어지지 않는 아이디 중복 검사를 간단하게 구현해보자.

 

[ 준비 작업 ]

- 이전 준비 작업과 동일하며 추가적으로 WEB-INF > views > login 폴더를 생성하고 ex01.jsp을 만들자.

- 예제를 위한 임의의 테이블 tblUser를 만들고 컬럼에 id를 추가해서 몇개만 미리 넣어두자.

 

[ 아이디 중복 검사 예제 ]

  1) JSP (ex01.jsp)

  - 기본적인 아이디 입력 폼 양식과 중복 체크 검사 결과를 알려줄 span태그를 한개 설정한다.

<h2>아이디 중복검사</h2>
<table class="table table-bordered">
    <tr>
        <th>아이디</th>
        <td>
            <input type="text" name="txtid" id="txtid" class="form-control" />
            <input type="button" id="btnCheck" class="btn btn-default" value="중복검사"/>
            <span id="result"></span>
        </td>
    </tr>
</table>

 

  2) Script(ex01.jsp)

  - 먼저 아이디가 입력을 했는지 안했는지 여부를 검사를 한다.

  - 요청할 URL은 idcheck.action으로 지정한다.

  - 넘겨줄 데이터값(id)를 지정해준다.

  - DB작업으로 반환된 값이 0이라면 사용 가능한 아이디이며, 아니라면 이미 사용한 아이디입니다 라고 출력해준다.

$('#btnCheck').click(function () {
   			
    if ($('#txtid').val() != '') {
   				
        // 아이디를 서버로 전송 > DB 유효성 검사 > 결과 반환받기
        $.ajax({
   					
            type: 'GET',
            url: '/ajax/login/idcheck.action',
            data: 'id=' + $('#txtid').val(),
            dataType: 'json',
            success: function(result) {
                if (result == '0') {
                    $('#result').text('사용 가능한 아이디입니다.');
                } else {
                    $('#result').text('이미 사용중인 아이디입니다.');
                }
            },
            error: function(a, b, c) {
                console.log(a, b, c);
            }
   					
        });
   				
    } else {
        alert('아이디를 입력하세요.');
        $('#txtid').focus();
    }
   			
});

 

  3) Controller (AjaxController.java)

   - 아이디를 입력하는 화면 ex01과 중복검사를 실행할 idcheck를 따로 만든다.

  - idcheck에서는 데이터 id 값을 받았으므로 매개변수에 String id를 추가한다.

  - 넘겨줄 값이 1또는 0이므로 int로 지정한다.

@RequestMapping(value = "/login/ex01.action", method = { RequestMethod.GET })
    public String ex01(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
        return "login/ex01";
}
	
@RequestMapping(value = "/login/idcheck.action", method = { RequestMethod.GET })
@ResponseBody 
public int idcheck(HttpServletRequest req, HttpServletResponse resp, HttpSession session, String id) {
    int result = dao.idcheck(id);
    return result; 
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public int idcheck(String id) {
        return template.selectOne("ajax.idcheck", id);
    }
}

 

  5) 쿼리 작성 (ajax.xml)

  - count 함수로 1이라면 "존재", 0이라면 "존재하지 않음" 을 알 수 있다.

  - 테이블은 기존에 사용했던 tblAjaxUser가 아닌 예제를 위해 임의로 만든 tblUser를 사용한다.

<select id="idcheck" parameterType="String" resultType="Integer">
    select count(*) from tblUser where id = #{ id }
</select>

 

- 결과화면

실제 테이블 tblUser에 HONG 사용자가 존재하는걸 볼 수 있다. 

---

MEMO>

# 아이디 중복 검사 흐름은 이런식으로 기억하자.
         아이디를 서버에 전송 -> DB 유효성 검사(중복체크) -> 결과 반환받기  

# 반복문을 사용할 때 자바스크립트에서는 forEach, 제이쿼리에서는 each를 사용한다!!

# 데이터를 일방적으로 보내기만 한다면 ajax 프로퍼티에서 dataType과 success는 안쓰인다!

# GET은 필요로 하는 정보를 요청할 때(select) 
   POST는 정보를 추가, 수정, 삭제 할 때(insert, update, delete) 쓰인다.

# json 형식으로 자동 변환해주는 어노테이션 @ResponseBody !!!