본문 바로가기
개발자노트/웹

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

hansummer 2022. 8. 25. 11:49

AJAX
아이디 중복검사
인증
좋아요
추천 비추천
찜
.
.
.

등에 사용

 

=> 비동기처리
: 서버방문 X
  페이지의 내용이 유지

 

※ 보통 스프링에서는 @(어노테이션) 설정으로 진행되는 것이 일반적
※ JSP에서 사용하는 방식을 소개할 예정

 

 

ajax를 사용할 jsp 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- CDN 방식으로 jquery 사용 -->
</head>
<body>

<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("code: "+request.status);
					console.log("message: "+request.responseText);
					console.log("error: "+error);
				}
		});
	}
</script>
</body>
</html>

상단에 CDN 방식으로 jQuery를 사용하기 위해 연결을 해줌

button 을 만들어 버튼이 onclick 되면 실행 될 함수를 만듦.

check()라는 함수에서 $.ajax를 실행할 것인데,

type에는 Post / Get 중 어느 요청으로 보낼 지 작성을 해주고

url 에는 이 요청에 대한 수행을 할 url 주소를 써주면 된다. 프로젝트에 속해있는 폴더명을 적어주어도 되지만 

    ex) test / ajax /  

data 에는 만약 POST 방식으로 보내게 된다면, 어떠한 data를 어떠한 이름에 담아서 보낼지 { 데이터이름 : 보낼데이터값 }

sussecs : 에는 ajax의 수행이 성공 됐을 때 실행할 내용

                → 중복이 없을 시 id 가 result인 div의 내용에 text를 추가하고, css style을 정의해주는 것
                → 여기서 주의할 점은 ajax에서 수행 된 내용의 값이 있다는 전제,  ( 중복 된 아이디라고 실패가 된 것은 아님 )

                → 그리고 또한 function()안에 들어간 result는 ajax.jsp 의 결과를 변수명으로 정의해준 것이지 인자가 아님

error : 에는 ajax가 수행 자체가 되지 않았을 때 로그를 확인하기 위한 내용

 

 

 

 

check.do 를 요청했을 때 실행될 서블릿 코드

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 요청이 들어오면 그냥 doPOST로 가게끔 
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("로그1 ["+request.getParameter("mid")+"]");
		
		TestDAO dao=new TestDAO();
		TestVO vo=new TestVO();
		vo.setMid(request.getParameter("mid"));
		int result=dao.check(vo); 
		
		response.setContentType("application/x-json; charset=UTF-8"); // 이게 무슨 역할이라 했던건지 어노테이션 대신이라고 했는데
		// 이 과정을 안하면 타입이 정해지지 않아서 
		response.getWriter().write(result+"");// 요청했던 곳으로 result값을 보냄
								// result는 현재 int, write는 문자열로만 전달 가능, 문자열을 더함으로서, String 형식이 되게끔..
		
	}

}

doGet 으로 요청이 들어와도 doPost를 수행하도록 설정해주고,

객체를 만들어 메서드를 실행해준다.

 

 

TestVO 코드

package test;

public class TestVO {
	private String mid; // PK

	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;

import util.JDBCUtil;

public class TestDAO {
	Connection conn;
	PreparedStatement pstmt;
	
	final private String sql="SELECT * FROM TEST WHERE MID=?";
	
	public int check(TestVO vo) {
		// 상황에 따라 output 달라짐 , 결과를 1 / 0 / -1 로 많이 판단하기 때문에 int로도 사용할 때 있음
		conn=JDBCUtil.connect();
		try {
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, vo.getMid());
			ResultSet rs=pstmt.executeQuery();
			if(rs.next()) {
				return 0; // 아이디 중복 발생...
			}
		} catch (SQLException e) {
			e.printStackTrace();
			return -1; // 에러 발생할 시 -1 반환
		} finally {
			JDBCUtil.disconnect(pstmt, conn);
		}
		return 1; // 아이디 중복아님!
	}
}

여기서 check의 output 이 int인 것을 볼 수 있는데 주석을 확인해보자.

 

SQL 문에는 샘플데이터를 넣어주었다.

CREATE TABLE TEST(
	MID VARCHAR(20) PRIMARY KEY
);
INSERT INTO TEST(MID) VALUES('ADMIN');
INSERT INTO TEST(MID) VALUES('MEMBER');

SELECT * FROM TEST;

 

이 외에도 당연하게 JDBCUtil을 연결해주어야 한다.

코드는 생략하겠다.

 

 

 

수행결과

샘플데이터와 같은 값이 들어오면 수행되고,비동기처리이기 때문에 text에 입력한 내용이 증발하지 않은 것을 볼 수 있다.

 

샘플 데이터에 없는 아이디는 사용가능한 아이디라고 출력이 되는 것을 볼 수 있음

 

 

 

✔ 추가 내용

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>

<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){ // 다른 변수명을 사용할 수는 있지만 굳이 그럴 필요 없이 맞춰주는게 맞음
				// result는 String type
				// JS - 1 : 모든 데이터가 객체
				// JS - 2 : 동적타이핑(즉각적으로 자동형변환)
				console.log("로그1 ["+result+"]");
					if(result[0]==1){
						$("#result").text("사용가능한 아이디입니다!");
						$("#result").css("color","blue");
					}
					else{
						$("#result").text("이미 사용중인 아이디입니다...");
						$("#result").css("color","red");
					}
				},
			error: function(request, status, error){
					console.log("code: "+request.status);
					console.log("message: "+request.responseText);
					console.log("error: "+error);
				}
		});
	}
</script>
<!-- 
	mid(V에서 입력한 값)라는 변수만들어서 사용자가 입력한 값을 확보한 상태
	DB한테 물어볼예정 "mid라는 값이 DB에 이미 있어?" => DAO(M)
	C가 작업을 할 차례구나...!! "서블릿"
 -->

</body>
</html>

이 때 보면 받은 result 값이 List이기 때문에 비교를 하기 위해선 배열의 []를 사용해서 비교해주어야함

[C]
1. 데이터를 N개, 객체, 등을 보낼 수 있다.
2. 이 때, String 타입으로 보내야한다! - 규칙

위 내용을 설명할 수 있는 코드

package test;

import java.io.IOException;
import java.util.ArrayList;

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 요청이 들어오면 그냥 doPOST로 가게끔 
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("로그1 ["+request.getParameter("mid")+"]");
		
		TestDAO dao=new TestDAO();
		TestVO vo=new TestVO();
		vo.setMid(request.getParameter("mid"));
		int result=dao.check(vo); 
		ArrayList<Integer> datas =new ArrayList<Integer>();
		datas.add(1);
		datas.add(2);
		datas.add(4);
		
		response.setContentType("application/x-json; charset=UTF-8"); // 이게 무슨 역할이라 했던건지 어노테이션 대신이라고 했는데
		// 이 과정을 안하면 타입이 정해지지 않아서 
		response.getWriter().write(datas.toString());
		// response.getWriter().write(result+"");// 요청했던 곳으로 result값을 보냄
								// result는 현재 int, write는 문자열로만 전달 가능, 문자열을 더함으로서, String 형식이 되게끔..
								// jsp 에서는 자동 String화를 해주지 않기 때문에
								// Spring에서는 @RB 라는 어노테이션을 사용해서 안해도됨
		
	}

}

하단에 배열List를 사용하고, 보낼 때는 String 으로 보내는 것이 규칙이기 때문에 tostring을 사용했음

 

배열 index[0]번 자리에는 항상 1이 오도록 되어있어서 샘플데이터에 있는 정보더라도 1을 만나서 사용가능한 아이디라고 출력됨

'개발자노트 > 웹' 카테고리의 다른 글

HTML - JSP - 파일 업로드 ( 이미지 )  (0) 2022.08.26
HTML - FrontController  (0) 2022.08.23
초기화 매개변수 (xml)  (0) 2022.08.18
트랜잭션 예제 - 은행 계좌이체 예제  (0) 2022.08.17
트랜잭션 transaction  (0) 2022.08.17

'개발자노트/웹' Related Articles

티스토리툴바