AJAX STEP 4 - ID 중복 검사

Server

AJAX STEP 4 - ID 중복 검사

IT의 큰손 2023. 5. 16. 15:31

728x90

★ ID 중복 검사

1. 기존 방식
2. AJAX를 이용한 방식

★ 필요 파일

- com.test.ajax > "Ex08.java"
- views > "ex08.jsp"

- com.test.ajax > "Ex08Check.java"
- views > "ex08check.jsp

- com.test.ajax > "Ex08Data.java"

■ 소스코드

Ex08.java

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex08.do")
public class Ex08 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex08.java

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex08.jsp");
		dispatcher.forward(req, resp);
	}

}

ex08.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>아이디 중복검사</h1>
	
	<h3>새창 띄우기 방식</h3>
	
	<table>
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" id="id1" class="short" readonly>
				<input type="button" id="btn1" value="중복검사">
			</td>
		</tr>
	</table>
	
	<div>
		다른 업무 : <input type="text">
	</div>
	
	<h3>Ajax 방식</h3>
	
	<table>
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" id="id2" class="short">
				<input type="button" id="btn2" value="중복검사">
				<span id="result"></span>
			</td>
		</tr>
	</table>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#btn1').click(() => {
		
		window.open('/ajax/ex08check.do', 'idcheck', 'width=350 height=300');
		
	});
	
	$('#btn2').click( ()=> {
		
		$.ajax({
			
			type: 'GET',
			url: '/ajax/ex08data.do',
			data: 'id=' + $('#id2').val(),
			dataType: 'json',
			success: (result)=>{
				
				if(result.result ==1) {
					$('#result').text('중복된 아이디');
				} else {
					$('#result').text('사용가능한 아이디');
				}
				
			},
			error: (a,b,c)=>console.log(a,b,c)
			
		});
		
	});
	
</script>
</body>
</html>

Ex08Check.java

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex08check.do")
public class Ex08Check extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex08Check.java
		
		String id = req.getParameter("id");
		
		if (id != null && !id.equals("")) {
			AjaxDAO dao = new AjaxDAO();
			
			int result = dao.checkID(id);
			
			req.setAttribute("result", result);
			req.setAttribute("id", id);
		}

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex08check.jsp");
		dispatcher.forward(req, resp);
	}

}

ex08chcek.jsp : 기존 이용 방식

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>아이디 중복검사</h1>
	
	<form method="GET" action="/ajax/ex08check.do">
		<table>
			<tr>
				<th>아이디</th>
				<td><input type="text" id="id" name="id" class="short" required value="${id}"></td>
				<td><input type="submit" value="중복검사"></td>
			</tr>
		</table>
		
	</form>
	<div id="result">
		<c:if test="${result == 1}">
		이미 사용중인 아이디입니다.
		</c:if>
		<c:if test="${result == 0}">
		사용 가능한 아이디입니다.
		</c:if>
	</div>
	
	<hr>
	
	<div>
		<input type="button" value="사용하기" id="btn1" disabled>
		<input type="button" value="창닫기" id="btn2">
	</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#btn1').click(()=> {
		
		opener.document.getElementById('id1').value = '${id}';
		window.close();
		
	});

	$('#btn2').click(()=> {
		window.close();
	});
	
	<c:if test="${result == 1}">
		$('#btn1').attr('disabled', true);
	</c:if>
	<c:if test="${result == 0}">
		$('#btn1').attr('disabled', false);
	</c:if>
	
</script>
</body>
</html>

Ex08Data.java : AJAX 이용 방식

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex08data.do")
public class Ex08Data extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex08Data.java

		String id = req.getParameter("id");
		
		AjaxDAO dao = new AjaxDAO();
		
		int result = dao.checkID(id);
		
		/*
		 	
		  	{
		  		"result" : 1
		  	}
		 
		 */
		
		resp.setContentType("application/json");
		resp.getWriter().printf("\"result\" : %d", result);
		resp.getWriter().close();
		
	}

}

■ 실행 결과

728x90

저작자표시 비영리 변경금지