프로젝트 코드리뷰/Travel Maker

Travel Maker - 실시간 로그인 중복검사 (ajax)

SooHw 2023. 8. 25. 09:30

 

<input type="text" name="id" id="idInput"></label>
<div id="duplicateMessage" style="color: red;"></div> <!-- 메시지를 출력할 요소 추가 -->

<!-- 아이디 중복검사 -->

<script>
    $(document).ready(function () {
        $("#idInput").on("focusout", function () {
            const enteredId = $(this).val();

            $.ajax({
                type: "POST",
                url: "DuplicateCon",
                data: { id: enteredId },
                dataType: "json",
                success: function (response) {
                    const duplicateMessage = $("#duplicateMessage");
                    const signUpBtn = $("#signUpBtn"); // 회원가입 버튼 선택
                    if (response.status === "duplicate") {
                        duplicateMessage.text("중복된 아이디입니다.");
                        signUpBtn.prop("disabled", true);
                        signUpBtn.addClass("signUpButton"); // 회원가입 버튼 클래스 추가 (비활성화 스타일 적용)
                    } else {
                        duplicateMessage.text("");
                        signUpBtn.prop("disabled", false);
                        signUpBtn.removeClass("signUpButton"); // 회원가입 버튼 클래스 제거 (활성화 상태에서 기본 스타일 적용)
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 요청 중 오류가 발생했습니다:", error);
                }
            });
        });
    });
</script>

 

 

DuplicateCon

package controller;

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;

import org.json.JSONObject;

import model.UserDAO;
import model.UserDTO;

@WebServlet("/DuplicateCon")
public class DuplicateCon extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("application/json"); // JSON 형식으로 응답을 설정
		
		UserDAO udao = new UserDAO();
		
		String user_id = request.getParameter("id");

		int row = udao.duplicateId(user_id);
		
		JSONObject jsonResponse = new JSONObject(); // 응답용 JSON 객체 생성
		
		if (row > 0) {
			jsonResponse.put("status", "duplicate"); // 중복된 아이디일 경우 status에 "duplicate" 추가
		} else {
			jsonResponse.put("status", "not_duplicate"); // 중복되지 않은 아이디일 경우 status에 "not_duplicate" 추가
		}
		
		response.getWriter().write(jsonResponse.toString()); // JSON 응답 전송
	}

}

 

 

DAO, Mapper

public int duplicateId(String user_id) {
	SqlSession session = sqlSessionFactory.openSession(true);
	int row = session.selectOne("duplicateId", user_id);
	session.close();
	
	return row;
}


<select id="duplicateId" parameterType="String" resultType="int">
	select count(user_id) from user_info where user_id=#{user_id}
</select>

'프로젝트 코드리뷰 > Travel Maker' 카테고리의 다른 글

Travel Maker - 반응형 웹 (미완성)  (0) 2023.08.25
Travel Maker - 평점시스템  (0) 2023.08.25
Travel Maker - SummerNote  (0) 2023.08.25
Travel Maker - Google Maps  (0) 2023.08.25
Travel Maker - 결제API (PortOne)  (0) 2023.08.25