[Spring] 자바스크립트 - AJAX 통신을 활용한 아이디 중복체크

Feb 29, 2024

Contents

1. 버튼으로 체크하기 2. onchange 이벤트 사용하기

💡

회원가입을 시도할 때 아이디는 회원 가입 버튼을 눌렀을 때 중복체크를 하는 것 보다, 아이디를 입력했을 때 바로 확인하는 것이 좋다. 이런 기능은 AJAX 통신을 통해서만 가능하다.

1. 버튼으로 체크하기

1.1 버튼 만들기

joinFormm.mustache


<div class="container p-5">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input id="username" type="text" class="form-control" placeholder="Enter username" required>
                   <button type="button" class="btn-warning" onclick="check()">아이디 중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password" required>
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email" required>
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>

아이디 중복 체크 버튼을 누르면 아이디 중복 체크를 할 수 있도록 만든다. 버튼에 check() 함수를 포함한다. 버튼을 누르면 check() 함수가 실행된다.

1.2 API 컨트롤러 만들기


    @GetMapping("/api/username-same-check")
    public @ResponseBody ApiUtil<?> usernameSameCheck(String username){ //@ResponseBody 데이터 리턴을 위해
        User user= userRepository.findByUsername(username);
        if(user==null){
            return new ApiUtil<>(false);  // 아이디가 없다면 false를 바디에 담는다.
        }else {
            return new ApiUtil<>(true);  // 아이디가 이미 존재한다면 true 를 바디에 담는다.
        }

    }

AJAX 통신을 위한 컨트롤러를 만든다.

바디데이터를 받기 위해 클래스를 생성한다.


package com.example.springblog._core.util;

import lombok.Data;

@Data
public class ApiUtil<T> {

    private Integer status ;
    private String msg ;
    private T body;

    public ApiUtil(T body) {  // 통신 성공시 
        this.status = 200;
        this.msg = "성공";
        this.body = body;
    }

    public ApiUtil(Integer status, String msg) { // 통신 실패 시
        this.status = status;
        this.msg = msg;
        this.body = null ;
    }
}

1.3 AJAX 통신


{{> /layout/header}}

<div class="container p-5">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input id="username" type="text" class="form-control" placeholder="Enter username" name="username" required>
                    <button type="button" class="btn-warning" onclick="check()">아이디 중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password" required>
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email" required>
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>

<script>

    let isSameCheck = false ;

    function check(){  // 버튼 실행시 발동
        let username =$("#username").val(); // 입력 필드의 값을 username 변수에 저장

        $.ajax({    // 서버에 비동기 GET 요청
            type:"get", 
            url:"/api/username-same-check",  // 컨트롤러의 주소와 동일하게 작성
            data: {username: username}  // 요청데이터는 username
        }).done((res)=>{
            if(res.body==false){  // api 통신으로 받은 body 데이터를 가져온다. 
                isSameCheck = true;
                 alert("사용가능한 아이디입니다.")
            }else{
                isSameCheck = false;
                alert("아이디가 중복되었습니다.")
            }
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    }

</script>
{{> /layout/footer}}

DB에 없는 아이디는 사용 가능 팝업이 뜬다.

아이디가 중복된다면 중복 팝업이 뜬다.

2. onchange 이벤트 사용하기

2.1 onchange 이벤트 작성


 <div class="mb-3">
    <input id="username" type="text" class="form-control" placeholder="Enter username" name="username" onchange="check()" required>
 </div>

버튼을 지우고 인풋 태그에 onchange="" 이벤트를 적는다. onchange="" 버튼은 사용자가 TAP 버튼을 누르면 실행된다.

2.2 AJAX 통신


<script>

    let isSameCheck = false ;

    function check(){  // 버튼 실행시 발동
        let username =$("#username").val();

        $.ajax({
            type:"get",  // GET요청
            url:"/api/username-same-check",  // 컨트롤러의 주소와 동일하게 작성
            data: {username: username}  
        }).done((res)=>{
            console.log(res);
            if(res.body==false){  // api 통신으로 받은 body 데이터를 가져온다. 
                isSameCheck = true;
                 alert("사용가능한 아이디입니다.")
            }else{
                isSameCheck = false;
                alert("아이디가 중복되었습니다.")
            }
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    }

</script>

AJAX 통신은 버튼 방식과 동일하다.