3. DataBinding을 위한 화면 구조 변경, 자원작성 (2)jquery

앞에 이어 home.js 파일을 작성합니다.

 

4) home.js 파일 작성 : 동적 코드

home.js파일은 webapp/js 폴더 아래에 위치하며

 

코드는 아래와 같습니다.

$( document ).ready(function() {
    load_movielist();
});
 
 
function load_movielist(){
    var movieList;
    var html;
    $("#load_movieList").click(function(){  
    
        var url="/visualize_pilot/restex";  
        //var params="param1="+param1+"¶m2="+param1;  
  
        $.ajax({      
            type:"POST",  
            url:url,      
            //data:params,      
            success:function(args){
                movieList = args;
                for(var i=0;i<args.length;i++){
                    html = "<tr>"
                            + "<td>" + args[i].movie_name + "</td>" 
                            + "<td>" + args[i].director + "</td>"
                            + "<td>" + args[i].types + "</td>"
                            "</tr>";
                    $("#movieList").append(html);
                }
                
                console.log(args);
            },   
            beforeSend:function(){
                $("#movieList").empty();  
            },
            error:function(e){  
                alert(e.responseText);  
            }  
        });  
      
    });
}

위 코드의 내용은

- 버튼을 클릭하면

- url을 통해 데이터 호출(restController)

- 호출 성공시 dataBinding을 하는 코드이며

 

코드에서 눈 여겨 볼 부분은

1) $로 시작하는 부분이 있다는 점

2) $(document).ready 영역

3) $.ajax 영역

 

입니다.

 

$로 시작한다는 것은 현재 jquery를 이용해 개발하고 있음을 의미하며, home.jsp 파일에서 해당 라이브러리를 불러오고 있음을 확인 할 수 있습니다.

 

$(document).ready 영역은 html 구조를 먼저 모두 읽은 후 코드를 수행하겠다는 내용으로

위 코드에서는 home.jsp의 태그 및 구조를 모두 읽고 load_movieList 함수를 호출합니다.

 

해당 부분이 중요한 이유는 데이터 바인딩 할 영역을 불러오지 못했지만 데이터를 바인딩하는 경우 해당 영역을 찾지 못해 오류가 발생하는 요인이 될 수 있기에, 오류가 나지 않도록 태그를 먼저 읽을 수 있도록 처리하는 영역이기 때문입니다.

 

그리고 $.ajax의 경우 WAS(SPRING) 영역으로 데이터를 호출하기 위해 jquery에서 제공해주는 방법으로

호출을 위한 url,

서버에 전송 할 data,

호출 전 수행할 코드,

동기/비동기 방식 여부

등을 설정 후 데이터 호출을 합니다.

 

해당 코드에서는 List방식으로 데이터를 가져오기때문에 데이터 호출 성공시 <tr>.. </tr>형식의 태그를 동적으로 만들어 id가 movieList인 영역에 Data를 바인딩하고 있습니다.

 

결과 화면

** 참고 **

1) Jquery는 화면 개발을 쉽고 빠르게 하기 위한 Library입니다. 위 코드 이외에도 유용하게 사용할 수 있으니 관심을 가지고 공부하시길..

 

2) Jquery를 이용할지라도

pure javascript 에 대한 기본기를 탄탄히 하시기 바랍니다.

ECMA 5, ECMA 6 과 같이 모던 자바스크립트가 개발을 하는데에 크게 도움이 될 경우가 매우 많으며

jquery외의 library역시 pure javascript가 기본이 됩니다.!!