Ajax 이용하여 아이디 중복검사하기

아이디 중복검사 예제를 위해 testVO와 testDAO를 만들어 두었다.

 

testVO

package test;

public class TestVO {
	private String mid;

	public String getMid() {
		return mid;
	}

	public void setMid(String mid) {
		this.mid = mid;
	}

	@Override
	public String toString() {
		return "TestVO [mid=" + mid + "]";
	}
	
}

 

testDAO

package test;

import java.sql.Connection;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class TestDAO {
	Connection conn;
	PreparedStatement pstmt;
	
	final private String sql_checkId="SELECT * FROM TEST WHERE MID=?";
	
	public int checkId(TestVO vo) {
		conn = JDBCUtil.connect();
		try {
			pstmt = conn.prepareStatement(sql_checkId);
			pstmt.setString(1, vo.getMid());
			ResultSet rs = pstmt.executeQuery();
			if(rs.next()) {
				return 0; // 아이디 중복 발생...
			}
		} catch (SQLException e) {
			e.printStackTrace();
			return -1;
		} finally {
			JDBCUtil.disconnect(pstmt, conn);
		}
		return 1; // 아이디 중복 아님!!
	}
	
}

 

실행을 위한 .jsp 파일

버튼을 누르면 check() 함수가 실행되며 check() 함수는 mid라는 변수에 id가 mid인 input박스에 작성된 값을 담음

type: 정보를 보내는 방식 (ex. 'GET', 'POST')

url: 정보를 보낼 url

data: 어떤 정보를 보낼 건지 {이름: 값} (ex. {mid라는 이름으로 : mid라는 값})

success: 수행에 성공했을 때 실행되는 결과

error: 수행에 실패했을 때 실행되는 결과

<div id="box">
	<input type="text" name="mid" id="mid">
	<button class="btn" onclick="check();">중복검사</button>
	<div id="result"></div>
</div>

<script type="text/javascript">
	function check(){
		var mid = $("#mid").val();
		$.ajax({
			type: 'GET',
			url: '${pageContext.request.contextPath}/check.do?mid='+mid,
			data: {mid:mid},
			success: function(result){
				console.log("로그1 ["+result+"]");
				if(result==1){
					$("#result").text("사용 가능한 아이디입니다!");
					$("#result").css("color","blue");
				}
				else{
					$("#result").text("이미 사용중인 아이디입니다...");
					$("#result").css("color","red");
				}
			},
			error: function(request, status, error){ // 순서 체크해보기!
				console.log("상태코드: "+request.status);
				console.log("메세지: "+request.responseText);
				console.log("에러설명: "+error);
			}
		});
	}
</script>

 

ajax로 요청을 보내 로직을 실행할 서블릿 파일

package test;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Check
 */
@WebServlet("/check.do")
public class Check extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Check() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response); // get 방식 요청이 들어오면 post로 보내줌
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("로그1 ["+request.getParameter("")+"]");
		
		TestDAO dao = new TestDAO();
		TestVO vo = new TestVO();
		vo.setMid(request.getParameter("mid")); // .jsp 파일로부터 들어온 mid값을 vo에 세팅 
		int result = dao.checkId(vo); // 입력받은 mid 값을 가지고 중복검사하여 결과를 result에 담음
		
		response.setContentType("application/x-json; charset=UTF-8");
		response.getWriter().write(result+""); // 수행결과를 result라는 이름으로 반환
	}

}

컨트롤러(C)에서 데이터를 N개 또는 객체 등을 보낼 수도 있으며, 이때 데이터는 String 타입으로 보내야만 한다

뷰(V)에서는 JS가 동적 타이핑을 지원하기 때문에, list 타입으로 데이터를 받아서 사용할 수 있다.