[오늘의 할 일] 프로젝트

회원가입 폼

 

회원가입 중복

 

 

회원가입 완료

 

AJAX를 이용해서 자바스크립트를 통한 유효성 검사를 진행 했다.

 

 

 

중복검사는 이와 같다.

function user_check_id() {
        const user_id = $('#form-input-id').val();

        $.ajax({
            url: "member_join_check_id",
            data: {User_id: user_id},
            dataType: "text",
            success: function (data) {
                alert(data);
                if (data == 'null') {
                    check_id = "1";
                    $('#check_id_mollang').empty();
                    $('#check_id_mollang').append("<i class='far fa-check-circle' style='font-size: 30px; margin-top: 5px; color:#00FF1F'></i>");
                } else {
                    check_id = "0";
                    $('#check_id_mollang').empty();
                    $('#check_id_mollang').append("<i class='far fa-times-circle' style='font-size: 30px; margin-top: 5px; color:#f00'></i>");
                }
            }
        })
    }

일반 자바스크립트문에 ajax를 붙였다.

ajax 안의 url의 맵핑이 작동하면서 컨트롤러가 실행된다.

 

 

@RestController
public class MollangController {

    @Autowired
    UserService userService;

    @RequestMapping("/member_join_check_id")
    public String member_join_check_id(@RequestParam("User_id") String id) {

        System.out.println("체크하기");

        String result = userService.User_Join_Check_Id(id);

        System.out.println(result);

        return result;
    }

컨트롤러에서 ajax가 보낸 맵핑을 읽고, 그 자료를 Service 객체에 다시 전송시킨다.

 

//아이디 중복 체크하기
    @Transactional
    public String User_Join_Check_Id(String user_id)
    {
        String check = userRepository.User_Join_Check_Id(user_id);

        if(check == null)
        {
            return "null";
        }
        return "check";
    }

서비스 객체는 입력받은 id값으로 sql문을 작동 시킨다.

 

// 아이디 검색, 아이디 찾기 (아이디 중복 찾기 용)
        @Query("SELECT user_id FROM User_listEntity WHERE user_id = :user_id")
        public String User_Join_Check_Id(String user_id);

Repository를 통해서 query문을 작성하였다.

 

쿼리문을 통해 값이 있는지, 없는지 파악한 후에 값을 다시 받는다.

 

 

값이 없을 경우 문자 null로 변경, 있을 경우 문자 "check"로 변경한다.

 

 

다시 되돌아가서 ajax의 text 결과값이 null인지 아닌지를 구분해서

입력한 결과값이 중복 되었는지, 아닌지를 살펴 볼 수 있게 된다.