table.sql
create table people(
id varchar2(10) primary key,
name varchar2(30) not null,
job varchar2(30) not null,
address varchar2(60) not null,
blood_type varchar2(2) not null,
reg_date date not null
);이후 sql Developer를 들어간뒤 실행 후 테이블에 1개의 데이터를 직접 넣는다.
confirmId.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import ="kr.util.DBUtil" %>
<%@ page import ="java.sql.Connection" %>
<%@ page import ="java.sql.PreparedStatement" %>
<%@ page import ="java.sql.ResultSet" %>
<%
//전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("utf-8");
//전송된 데이터 반환
String id = request.getParameter("id");
Connection conn =null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = null;
try{
//Connection 객체 반환
conn = DBUtil.getConnection();
//SQL문 작성
sql = "SELECT id FROM people WHERE id=?";
//JDBC 수행 3단계 :PreparedStatement 객체 생성
pstmt = conn.prepareStatement(sql);
//?에 데이터 바인딩
pstmt.setString(1,id);
//JDBC 수행 4단계
rs = pstmt.executeQuery();
if(rs.next()){//ID중복
%>
{"result":"idDuplicated"}
<%
}else{//ID미중복
%>
{"result":"idNotFound"}
<%
}
}catch(Exception e){
%>
{"result":"failure"}
<%
e.printStackTrace();
}finally{
//자원정리
DBUtil.executeClose(rs, pstmt, conn);
}
%>member.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 체크</title>
<style type="text/css">
ul{
padding:0;
margin:0;
list-style:none;
}
ul li{
padding:0;
margin:0 0 10px 0;
}
label{
width:100px;
float:left;
}
</style>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//아이디 중복 체크 결과 -> 0:아이디 중복 체크 미실시 또는 아이디 중복
// 1:아이디 미중복
let count = 0;
$('#confirmId').click(function(){
if($('#id').val().trim()==''){
alert('아이디를 입력하세요.');
$('#id').val('').focus();
return; //.click 이기 때문에 return만 함
}
//서버와 통신
$.ajax({
url:'confirmId.jsp', //요청URL
type:'post', //클라이언트에서 데이터를 전송할 때 전송 방식
data:{id:$('#id').val()}, //서버로 전송할 데이터
dataType:'json', //서버로부터 전송되어지는 데이터의 타입
success:function(param){
if(param.result=='idDuplicated'){//아이디 중복
count = 0;
$('#id_signed').text('이미 등록된 아이디').css('color','red');
$('#id').val('').focus();
}else if(param.result =='idNotFound'){//아이디 미중복
count = 1;
$('#id_signed').text('사용 가능한 아이디').css('color','black');
}else{//오류 발생
count =0;
alert('아이디 중복 체크 오류');
}
},
error:function(){//json문자열이 아니거나 json문자열이어도 오류가 있을 경우 발생함
count=0;
alert('네트워크 오류 발생');
}
});
});//end of click
//아이디 입력창에 데이터를 입력하면 중복 체크 관련 정보 초기화
$('#insert_form #id').keydown(function(){
count = 0;
$('#id_signed').text('');
});//end of keydown
$('#insert_form').submit(function(){
if($('#id').val().trim()==''){
alert('아이디를 입력하세요');
$('#id').val('').focus();
return false;
}
if(count ==0){
alert('아이디 중복 체크 필수');
return false;
}
});
});
</script>
</head>
<body>
<form id="insert_form" action="register.jsp" method="post">
<fieldset>
<legend>회원 가입</legend>
<ul>
<li>
<label for = "id"> 아이디</label>
<input type="text" name="id"id="id">
<input type="button" id="confirmId" value="아이디 중복체크">
<span id ="id_signed"></span>
</li>
<li>
<input type="submit" value = "전송">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
코드 완성 후 실행결과 영상
'쌍용교육(JAVA) > JSP' 카테고리의 다른 글
| 쌍용교육 -JSP수업 50일차 ajax(4) (0) | 2024.04.29 |
|---|---|
| 쌍용교육 -JSP수업 49일차 ajax(3) (0) | 2024.04.26 |
| 쌍용교육 -JSP수업 49일차 ajax (2) | 2024.04.26 |
| 쌍용교육 -JSP수업 48~49일차 jdbc(2) (0) | 2024.04.25 |
| 쌍용교육 -JSP수업 48일차 jdbc (0) | 2024.04.25 |
