[Spring] Spring과 Ajax연결하기

1. 먼저, Spring에서 Ajax를 사용하기 위해 pom.xml에 json dependecny를 추가해준다.

(*사용하고자 하는 version이 다를 수 있음)

        <!-- json(AJAX) -->

        <!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->

        <dependency>

            <groupId>com.googlecode.json-simple</groupId>

            <artifactId>json-simple</artifactId>

            <version>1.1.1</version>

        </dependency>

2. jsp에서 원하는 곳에 $.ajax로 AJAX 프론트 로직을 구현한다.

$(function(){

    $("#phone").on("keyup",function(){

        let phone = $(this).val();

        

        if(phone.length < 12){

            $(".dpck_ph").hide();

            $("#phDupCk").val(0);

            return; // 함수 실행 중지.

        }

        

        $.ajax({

            url:"phoneCheck.do",

            data:{phone:phone},

            type:"post",

            success:function(data){

                console.log(data);

                if(data == "ok"){

                    $('#dpck_ph').css('color','green');

                    $('#dpck_ph').text("사용가능");

                       $(".dpck_ph").show();

                    $("#phDuplCk").val(1);

                }else{

                    $('#dpck_ph').css('color','red');

                    $('#dpck_ph').text("사용불가");

                       $(".dpck_ph").show();

                    $("#phDuplCk").val(0);

                }

            },

            error:function(jqxhr, textStatus, errorThrown){

                console.log("ajax 처리 실패");

                

                // 에러 로그

                console.log(jqxhr);

                console.log(textStatus);

                console.log(errorThrown);

            }

        });

    });

});

// url : Controller의 @RequestMapping 서블릿 주소,

// data : JSON객체 형태로 key : value 꼴.

key = Controller로 전달할 변수, value = 전달할 진짜 값

// type : GET / POST 설정 가능

// success : 연결 성공시 실행할 내용

// error : 연결 실패시 실행할 내용

3. Controller 구현

/**

* 휴대폰번호 중복체크 AJAX

* @param phone

* @return

* @throws IOException

*/

@ResponseBody

@RequestMapping("phoneCheck.do")

public String idCheck(String phone) throws IOException  {

   

   int result = uService.phoneCheck(phone);

   

   if(result > 0) { // 중복 존재

       return "fail";

   }else {

       return "ok";

   }

   

   // @ReponseBody

   // 클라이언트에서 서버로 필요한 데이터를 전송하기 위해서 JSON이라는 데이터를 요청 본문에 담아서 서버로 보내면, 

   // 서버에서는 @RequestBody 어노테이션을 사용하여 HTTP 요청 본문에 담긴 값들을 자바 객체로 변환 시켜, 객체에 저장시킵니다.

   // 서버에서 클라이언트로 응답 데이터를 전송하기 위해서 @ResponseBody 를 사용하여 

   // 자바 객체를 HTTP 응답 본문의 객체로 변환하여 클라이언트로 전송시키는 역할을 합니다.

}

4. Service => Dao 구현