Programming/JDBC
[JDBC] Ajax: 아이디 중복 검사 구현
Isaac S. Lee
2023. 10. 26. 12:49
🍁아이디 중복 검사 구현
Ajax는 데이터를 전송해도 페이지 새로고침과 화면 깜박임이 발생하지 않기 때문에 화면에 메시지를 띄우는 작업을 하기에 적합하다.
select * from tblUser;
기본 코드
<h1>아이디 중복 검사</h1>
<table class="vertical">
<tr>
<th>이름</th>
<td><input type="text"></td>
</tr>
<tr>
<th>아이디</th>
<td>
<input type="text" id="id" class="short">
<input type="button" id="btn" value="중복검사">
<span id="result"></span>
</td>
</tr>
</table>
<div>
<input type="button" value="가입하기">
</div>
작업 과정
1. 데이터 가져오기 (id)
2. DB 작업 (중복 체크)
3. 결과 반환
ex06.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
<style>
</style>
</head>
<body>
<h1>아이디 중복 검사</h1>
<table class="vertical">
<tr>
<th>이름</th>
<td><input type="text"></td>
</tr>
<tr>
<th>아이디</th>
<td>
<input type="text" id="id" class="short">
<input type="button" id="btn" value="중복검사">
<span id="result"></span>
</td>
</tr>
</table>
<div>
<input type="button" value="가입하기" id="regBtn" disabled>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
<script>
$('#btn').click(function(){
$.ajax({
type: 'POST',
url: '/ajax/ex06data.do',
data: {
id: $('#id').val()
},
dataType: 'json',
success: function(result) {
//alert(result.message); //가능(0), 불가능(1)
if (result.message == 0) {
$('#result').text('사용 가능한 아이디입니다.');
$('#regBtn').prop('disalbed', false);
}
else {
$('#result').text('이미 사용중인 아이디입니다.');
$('#regBtn').prop('disalbed', true);
}
},
errors: function(a,b,c) {
console.log(a,b,c);
}
});
});
//아이디를 수정하면 가입 불가능
$('#id').change(function() {
$('#regBtn').prop('disabled', true);
});
</script>
</body>
</html>
아이디 우회 가입 방지
<input type="button" value="가입하기" id="regBtn" disabled>아이디를 복사 붙여넣기하여 가입하는 것을 방지하기 위해 disabled 속성을 부여한다.
아이디 중복 검사를 해서 사용할 수 있다는 결론이 난 경우에만 가입 버튼을 누를 수 있게 한다.
$('#regBtn').prop('disalbed', false);그리고 사용 가능한 아이디일 경우 disabled를 해제한다.
$('#id').change(function() {
$('#regBtn').prop('disabled', true);
})아이디 입력을 수정한 경우 다시 disabled 속성을 설정하여 사용 가능한 아이디 인증을 받아야만 가입할 수 있도록 한다.
Ex06Data.java
package com.test.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.test.ajax.repository.AjaxDAO;
@WebServlet("/ex06data.do")
public class Ex06Data extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 데이터 가져오기 (id)
//2. DB 작업 (중복 체크)
//3. 결과 반환
//1.
String id = req.getParameter("id");
//2. Data Access Object
AjaxDAO dao = new AjaxDAO();
int message = dao.check(id); //가능(0), 불가능(1)
/*
* 데이터를 돌려받을 형태
{
result: 0
}
*/
resp.setContentType("application/json");
resp.setCharacterEncoding("UTF-8");
PrintWriter writer = resp.getWriter();
writer.printf("{ \"message\": %d }", message);
writer.close();
}
}int result = dao.check(id);중복이 안 되고 사용이 가능하면 0을 돌려주고, 사용이 불가능하면 1을 돌려준다.
SQL 쿼리 때문에 이렇게 만드는 것이다.
AjaxDAO.java
public int check(String id) {
try {
String sql = "select count(*) as cnt from tblUser where id = ?";
pstat = conn.prepareStatement(sql);
pstat.setString(1, id);
rs = pstat.executeQuery();
if (rs.next()) {
return rs.getInt("cnt");
}
} catch (Exception e) {
System.out.println("AjaxDAO.check()");
e.printStackTrace();
}
return 0;
}DAO (Data Access Object)
DAO는 데이터를 전송해서 처리하는 객체를 의미한다.
