7월 8일 project - 데이터 확인 ajax

html 

<input type="text" class="login-input" id="mid" name="m_id" title="아이디" placeholder="아이디입력" autofocus>
<input type="button" class="idcheck-btn" value="중복확인" onclick="idcheck()">

javascript

<script>
    // 아이디 중복 체크
    // false일 경우 중복체크를 안 했거나 중복된 아이디를 입력한 상태
    let ck = false;

    function idcheck() {
        let id = $("#mid").val();

        // id 값을 입력했는지 검사
        if (id == "") {
            alert("아이디를 입력하세요.");
            $("#mid").focus();
            return;
        }
        // 전송할 데이터 작성
        let sendId = {"mid": id};
        console.log(sendId);

        // 서버로 id 전송
        $.ajax({
            url: "idCheck",
            type: "get",
            data: sendId,
            success: function (res) {
                if (res == "ok") {
                    alert("사용 가능한 아이디입니다.")
                    ck = true;
                } else {
                    alert("사용할 수 없는 아이디입니다.")
                    $("#mid").val("");
                    $("#mid").focus();
                    ck = false;
                }
            },
            error: function (err) {
                console.log(err);
                ck = false;
            }
        });
    }

controller

 //REST 방식(Ajax)으로 전송할 경우의 메소드
    @GetMapping("idCheck")
    @ResponseBody //REST 방식일 때 꼭 넣을 것
    public String idCheck(String mid) {
        log.info("idCheck()");
        String res = mServ.idCheck(mid);
        return res; // joinForm의 success res로 넘어감
    }

service

    public String idCheck(String m_id) {
        // 리턴 타입과 같은 변수를 먼저 선언할 것
        String res = null;

        // 아이디가 중복이면 1, 아니면 0
        int cnt = mDao.inCheck(m_id);
        if (cnt == 0) {
            res = "ok";
        } else {
            res = "fail";
        }
        return res;
    }

dao

 // 아이디 체크 메소드
    int inCheck(String m_id);

mapper - mybatis

  <select id="inCheck" resultType="Integer" parameterType="String">
        SELECT count(*) FROM member WHERE m_id=#{m_id}
  </select>