아이디 중복 확인
전에 실습했던 코드에서 controller를 제외한 코드를 가져왔다
controller는 Servlet 파일을 생성한 것으로
복사나 붙여넣기를 하면 제대로 동작하지 않는다
NewFile4_ID.jsp 전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 확인 예제</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn").on("click", function(e){ // event의 e
e.preventDefault(); // 이벤트 버블링 현상 막기
// 서브밋 강제 제출을 막을 수 있다
let mid = $("#mid").val();
// 유효성 검사
if(mid.trim() == "") {
// 만약에 아무것도 입력을 안했다면
// trim() : 공백제거
alert("아이디를 입력해주세요!");
return;
}
// 입력을 잘 했으면 ajax 수행
$.ajax({
url : "/day037/Test", // 요청내용
// 프로젝트명이 실제 주소에 들어가기 때문에 프로젝틈 명을 경로에 포함시켜야 한다
type : "POST", // 어떻게 요청할지
data : { mid : mid,
condition : "JOIN" }, // 내가 입력한 id : 내가 입력한 id값
// 파라미터 이름이 mid, 스크립트 변수명이 mid 15번 라인!
success : function(result){ // 성공시 수행 메서드
console.log(result);
console.log(typeof result);
if(result == 'true'){
alert("사용가능!")
}
else {
alert("사용 불가능..")
}
},
error: function(xhr, status, error){ // 실패시 수행 메서드
console.log(xhr.status); // 상태 코드
alert('비동기 처리 실패...');
}
});
});
});
</script>
</head>
<body>
<form action="controller.jsp" method="POST">
<input type="hidden" name="command" value="JOIN">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" id="mid" name="mid" required>
<button id="btn">중복확인</button>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="mpw" required></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="회원가입"></td>
</tr>
</table>
</form>
</body>
</html>
버튼이 어디 구현되어 있느냐에 따라 버블링 현상이 발생하기도 한다
🍄 이벤트 버블링(Event Bubbling) 현상
HTML 요소에 이벤트가 발생했을 때, 그 이벤트가 상위 요소로 전파되는 현상을 말해요
즉, 자식 ➡ 부모 ➡ 조상 요소 순으로 이벤트가 전달됨
🍄 이벤트 버블링 현상 막기
e.preventDefault( )
🍄 ajax
웹 페이지를 새로고침하지 않고 서버와 데이터를 주고받는 기술
요즘은 XML보다 JSON을 많이 사용
▪ 비동기 처리 가능 ➡ 페이지 전체 리로드 없이 일부 데이터만 갱신
▪ 서버와 GET, POST 요청 가능
🍄 ajax 기본 문법
$.ajax({
url: "서버URL", // 요청할 서버 주소
type: "GET" | "POST", // 요청 방식 (GET 또는 POST)
data: { key: value }, // 서버로 보낼 데이터
dataType: "json", // 서버가 반환하는 데이터 타입
success: function(response){
// 요청 성공 시 처리할 코드
console.log("성공:", response);
},
error: function(xhr, status, error){
// 요청 실패 시 처리할 코드
console.log("실패:", status, error);
}
});
- url → 요청할 서버 주소
- type → GET/POST
- data → 서버로 보낼 데이터
- dataType → 명시하지 않으면 기본은 문자열이 된다.
- success → 요청 성공 시 실행
- error → 요청 실패 시 실행
Test.java (Servlet 파일) 전체코드
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.dao.MemberDAO;
import model.dto.MemberDTO;
public class Test extends HttpServlet {
public Test() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("[로그] GET 요청");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("[로그] POST 요청");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String condition = request.getParameter("condition");
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
MemberDAO memberDAO = new MemberDAO();
MemberDTO memberDTO = new MemberDTO();
PrintWriter out = null;
memberDTO.setCondition(request.getParameter("condition"));
if("JOIN".equals(condition)) {
// 아이디 중복 확인
memberDTO.setMid(request.getParameter("mid"));
memberDTO = memberDAO.selectOne(memberDTO);
boolean flag = memberDTO == null ? true : false;
out = response.getWriter();
out.print(flag);
}
else if("REGISTER".equals(condition)) {
String name = request.getParameter("name");
// 1. 중복 체크
memberDTO.setMid(mid);
if(memberDAO.selectOne(memberDTO) != null) {
out.print(false); // 이미 존재하는 아이디
out.close();
return;
}
// 2. 회원가입
memberDTO.setMpw(mpw);
memberDTO.setName(name);
boolean success = false;
try {
success = memberDAO.insert(memberDTO); // insert 후 성공 여부 반환
} catch(Exception e) {
e.printStackTrace();
success = false;
}
out.print(success);
}
out.close();
}
}
🍄 ajax 비동기
무언가를 눌렀을 때 -> 깜빡 거림, 화면이동, 서버이동, 페이지 이동 url이 바뀐다
페이지 이동 없이 같은 화면에서 어떤 서비스를 해야할 때
ex) 지도 검색 중 끊김이 없어야 하지만 데이터는 계속 불러와야 한다
이럴 때 비동기를 사용해야 한다
비동기처리 = 화면 유지 && 서버가 필요할 때(데이터 DB가 필요할 때)
🍄 비동기 AJAX 장점
페이지 새로고침 없이 서버 통신 가능
사용자 경험(UX) 향상
부분적인 데이터 업데이트 가능
서버 응답 지연에도 페이지 멈추지 않음
'JSP' 카테고리의 다른 글
| 🍓🍓 xml 파일 설정! | 디자인 패턴 4가지 (MVC, 싱글톤, 팩토리, 템플릿) (0) | 2025.11.27 |
|---|---|
| 프론트 컨트롤러 FrontController (0) | 2025.11.27 |
| DML(Data Manipulation Language) (0) | 2025.11.24 |
| GET 방식과 POST 방식 (0) | 2025.11.24 |
| 트리나라 페이지 분석하기 (0) | 2025.11.22 |