5월 16일 (1) Spring - AJAX DB 연동

setting 

1. pom.xml

2. application.properties

3. 폴더 생성

4. services - spring boot 연결

 

비동기 전송AJAX

단순 데이터(문자열) 전송

데이터 형식 : {"변수명":데이터}

- 변수명 부분은 항상 문자열로 작성 -  " " 사용

- 데이터 부분은 전송 데이터를 자바스크립트 변수에 넣고 사용할 것으로 추천함

 

예) 보낼 변수명 - data

      보낼 데이터 - 홍길동

 

let d = "홍길동"';

let sendObj = {"data":d}

 

<script>
    $("#ck").click(function (){
        // 사용자가 입력한 데이터 가져오기
        let inputId = $("#uid").val();
        if(inputId === ""){
            alert("아이디를 입력하세요.");
            $("#uid").focus();
            return; //함수 종료
        }
        // 전송형식에 맞게 작성
        let sendObj = {"uid":inputId};
        console.log(sendObj);

        // 컨트롤러에 uid 전송 및 결과 처리
        $.ajax({
            url:"idcheck", //컨트롤러 매핑에 사용할 url
            type:"get", //전송방식
            data:sendObj,
            success: function (result){
                console.log(result);
            },
            error: function (error){
                console.log(error);

            }
        });
    });
</script>

   // dao
   @Mapper 
   public interface MemberDao {
    // 입력한 uid로 검색하여 값이 나오는지 확인
    @Select("SELECT count(*) FROM usertb1 WHERE uid=#{uid}")
    // true : 1, false : 0
    int getUid(String uid);
    // @Insert : 삽입, @Update : 수정, @Delete : 삭제

}
  
    // service
    public String idCheck(String uid){
        log.info("idCheck()");
        String result = null;

        // r이 1이면 중복된 id가 존재, 0이면 중복된 id 없음
        int r = mDao.getUid(uid);
        if(r == 0){
            result = "ok";
        } else {
            result = "fail";
        }

        return result;
    }
    
    
    // controller
    @GetMapping("idcheck")
    @ResponseBody
    //let sendObj = {"uid":inputId};
    public String idcheck(String uid){
        // DB를 검색하여 같은 uid 값이 있는 지 확인
        String result = mServ.idCheck(uid);

        return result;
    }