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
'Server' 카테고리의 다른 글
| AJAX STEP 6 - 다양한 전송 방법 (2) | 2023.05.17 |
|---|---|
| AJAX STEP 5 - 주소록 조회 (0) | 2023.05.16 |
| AJAX STEP 3 - Real AJAX 구현 (1) | 2023.05.16 |
| AJAX STEP 2 - Push Server (0) | 2023.05.15 |
| Servlet + JSP STEP 4 - Memo (0) | 2023.05.15 |
