ajax를 이용해 ID중복체크 해보기

<tr>
    <th><label for="user_number">학번(교번)</label></th>
    <td><input type="text" name="user_num" id="user_number" size="8" 
        placeholder="학번(교번)" style="height: 15pt; margin-bottom: 13px">
    <span id="idchk"></span></td>
</tr>
 

상단의 <span>태그에 아이디의 중복여부를 출력합니다.

(학번이 아이디라고 생각해주세요)

member.js

$(function(){
    $('#user_number').blur(function(){
        $.ajax({
            type:"POST",
            url:"../member/idcheck.jsp",
            data:{
                "user_number": $('#user_number').val()
            },
            success:function(data){
                if($.trim(data) == "YES"){
                    //alert('사용가능');
                    $('#idchk').html('<b style="font-size:18px;color:blue">사용가능.</b>');
                }else{
                    //alert('사용불가');
                    $('#idchk').html('<b style="font-size:18px;color:red">사용불가.</b>');
                }
            }
        });    
    });
});

POST방식으로 url에 적힌 경로에 요청을 합니다.

data에는 요청 서버 보낼 데이터들을 입력합니다.

요청이 성공하면 success에서 콜백함수를 실행합니다.

idcheck.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="selectController" class="sogom.mgmt.libs.controller.SelectController"></jsp:useBean>
<%
    request.setCharacterEncoding("UTF-8");
 
    String user_number = request.getParameter("user_number");
    boolean flag = true;
    String str = "";
    if(user_number == null){
        user_number = "";
    }
    
    if(!user_number.equals("")){
        flag = selectController.idCheck(user_number);
    }
    if(flag){    // 이미 존재하는 계정
        str = "NO";
        out.print(str);
    
    }else{        // 사용가능한 계정
        str = "YES";
        out.print(str);
    }
%>

DB에 연결해 해당 아이디가 존재하는지 확인후 결과값을 flag에 담아놓습니다. (15번라인)

그 후 조건문을 이용해 중복여부에 따라 결과를 출력시킵니다. (member.js)