[Spring Boot] Spring Model에서 보낸 값 JavaScript (AJAX) 에서 사용하기

Spring Model에서 보낸 값을 JavaScript (AJAX) 에서 사용하는 방법

 

    @GetMapping("/movie/{movieCode}")
    public String movieDetail(@PathVariable int movieCode, Model model) {
        model.addAttribute("movieCode", movieCode);
        return "movie_detail";
    }

 

Controller에서 Model 에 movieCode로 값을 담아서 보냈을 때

자바스크립트, ajax 에서 사용하고 싶으면 

 

let movieCode = [[ ${movieCode} ]];

이렇게 가져오면 된다 !

 

 

ex.

<script>

    let movieCode = [[ ${movieCode} ]];

    $(document).ready(function() {
        init();
    });

    function init(){
        $.ajax({
            // type: "GET",
            url: "/api/movie/" + movieCode,
            // dataType: "json",
            success: function (data) {
                let con='';

                con+='<div class="box-contents">';
                con+='<div class="title">';
                con+='<strong>'+data.movieNm+'</strong>';
                con+='<p>'+data.movieNmEn+'</p>';
                con+='</div>';
                con+='<div class="score">';
                con+='</div>';
                con+='<div class="spec">';
                con+='<dl>';
                con+='<dt>감독 :&nbsp;</dt>';
                con+='<dd class="on">'+data.directorNm+' ('+data.directorNmEn+')</dd>';
                con+='<dt>배우 :&nbsp;</dt>';
                con+='<dd class="on">'+data.actorNm+'</dd>';
                con+='<dt>장르 :&nbsp;</dt>';
                con+='<dd class="on">'+data.genreNm+'</dd>';
                con+='<dt>기본정보 :&nbsp;</dt>';
                con+='<dd class="on">'+data.watchGradeNm+',&nbsp;'+data.showtime+'분,&nbsp;'+data.nationNm+', '+data.typeNm+'</dd>';
                con+='<dt>개봉 :&nbsp;</dt>';
                con+='<dd class="on">'+data.openDt+'</dd>';
                con+='<dt>배급사 :&nbsp;</dt>';
                con+='<dd class="on">'+data.companyNm+'</dd>';
                con+='</dl>';
                con+='</div>';
                con+='</div>';

                $('#movie_detail_content').html(con);

                $('#movie_name').html(data.movieNm)
            },
            error: function(xhr) {
                console.log("실패다ㅠ");
                console.log("에러메세지 = " + textStatus);
                console.log("에러코드 = "+xhr.status);
            }
        });
    }

</script>

---

참고

https://pika-chu.tistory.com/1037