1. DAO 생성
메서드를 int 형으로 만들어 0과 1로 데이터 존재 여부/ 오류 등과 같은 상황일 때 사용한다.
서블릿에서 mid값을 받아와 메서드 실행한다.
2. 테이블 생성
ID 테이블을 생성 후 임의의 데이터인 'admin'과 'test' 값 삽입
3. jsp파일 ajax 사용
<%@ 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>
<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"> <!-- 입력한 mid값이 function check 의 url mid로 전달된다 -->
<button class="btn" onClick="check()">중복검사</button>
<div id="result"></div>
</div>
<script>
function check(){
var mid = $("#mid").val(); //html에서 불러온 값
$.ajax({
type : 'GET', //데이터를 많이 보내는 경우 POST를 사용한다.
url : '${pageContext.request.contextPath}/check.do?mid='+mid,
//mid라는 변수를 만들어서 사용자가 입력한 값을 확보한 상태
//DB에게 mid 값이 있는지 확인
//dao를 통해 뷰로 가야함 > C 작업 '서블릿'
data : {mid:mid},
success : function(result){ // 서블릿으로부터 받아온 데이터 존재 여부 값
//js가 동적 타이핑을 지원하기 때문에
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("상태코드 : "+ request.status);
console.log("오류메세지 : "+request.responseText);
console.log("에러 : "+error);
}
});
}
</script>
</body>
4. 서블릿
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") //check에 반응
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);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("로그1 ["+request.getParameter("mid")+"]");
TestDAO dao = new TestDAO();
TestVO vo = new TestVO();
vo.setMid(request.getParameter("mid")); //function check() 로부터 mid 파라미터 값 받아옴
int result = dao.check(vo); //check의 아웃풋이 int형 > mid 값을 받아 DB에 데이터가 존재하는지?
response.setContentType("application/x-json; charset=UTF-8");
response.getWriter().write(result+""); //result 내용을 ajax로 전송
}
}response.setContentType > application으로 contenttype을 json 파일로 넘겨준다
getwriter > result 내용을 ajax로 전송
결과 값
'IT Study > JSP' 카테고리의 다른 글
| JSP - FrontController를 이용한 내 글만 보기 기능 (1) | 2023.01.05 |
|---|---|
| JSP - FrontController를 이용한 더보기 기능 (0) | 2023.01.04 |
| JSP - FrontController를 이용한 회원탈퇴 기능 (0) | 2023.01.04 |
| JSP - FrontController 패턴 (0) | 2023.01.04 |
| JSP - 리스너/필터 (1) | 2023.01.04 |
댓글