openAPI jQurey의 ajax처리하기

jQuery는 ajax을 처리하기 위한 다양한 메소드를 지원한다. 

jQuery의 ajax처리를 위한 주요 메소드는 3가지로 존재한다. 

• $.get(url, data,function(responseData){...}, responseDataType);
  • *url: 요청URL
  • data: 서버로 보내는 데이터, 보낼게 없으면 생략가능
      {page:1, no:14} ->요청URL?page=1&no=14
      "page=1&no=14" ->요청URL?page=1&no=14
      위아래 둘중에 하나로 보내도 상관없다. 위처럼 보내도 아래처럼 변환되어 전송된다.
  • *function(responseData) {...} : 서버로부터 성공적인 응답이 왔을 때 jQuery가 실행하는 메소드다.
    • responseDate에는 서버가 응답으로 보낸 데이터가 전달된다.  
  • jQuery는 responseData로 데이터를 전달할 때, 자바스크립트 객체/배열, XML DOM객체로 변환한 후 전달한다.
  • responseDataType :서버로부터 응답으로 받을 것으로 예상되는 컨텐츠 타입을 지정한다.(생략가능하다.)
      "text" - plain text
      "json" - json 형식의 데이터 -> javascript 배열, 객체 변환 후 반환
      "xml"  - xml 형식의 데이터 -> XML Document객체로 변환 후 반환
       "jsonp" - 다른 사이트의 서버로부터 데이터를 요청할 때 사용된다.
    url과 function은 필수다
  • 사용방법
  • $('#btn-load-products').click(function(){
    //id가 상품을 보여주는 버튼을 클릭하면 콜백함수를 호출한다.
      var $tbody = $('#table-products tbody');
     //id가 table-product안에 있는 tbody의 jQuery객체를 tbody에 미리정의해둔다.
      $.get("/script2/product/list.hta",function(data){
    //get방식으로 호출한다.(url, data, fuction(responseData)) -->data는 필요없어 생략가능하다.
      $.each(data, function(index, product){
    //반복해서 응답받은 데이터를 index마다 상품에 저장한다
      //console.log(product, product.no, product.name, product.company, product.price, product.discountPrice);
      //no: 300, name: 'apple watch', company: '애플', price: 600000, discountPrice: 550000, …} 300 'apple watch' '애플' 600000 550000
      //product의 객체, no,name순으로 출력된다.
      var row = "<tr>";
      row += "<td>"+product.no+"</td>";
      row += "<td>"+product.name+"</td>";
      row += "<td>"+product.company+"</td>";
      row += "<td>"+product.price.toLocaleString()+" 원</td>";
      row += "<td><strong>"+product.discountPrice.toLocaleString()+"원</strong></td>";
      row += "</tr>";
     
      $tbody.append(row); //tbody막내자식으로 들어간다.
      });
      },"json");
    //다른 사이트의 서버로부터 데이터를 json형식의 데이터로 받는다. 
      })
• $.ajax({
    type: 'GET' or 'POST', //요청방식
    url: '요청URL', //요청URL
    data: {no:14, page:1} or "no=14$page=1",
  //서버로 보내는 데이터-->요청key
    contentType: 'application/json' or 'text/xml',
  //서버로 보내는 데이터의 컨텐츠타입, 기본값 "application/x-www-form-urlencoded"
    dataType: 'text' or 'json' or 'xml' or 'jsonp',
  //서버로부터 응답으로 받을 것으로 예상되는 컨텐츠 타입을 지정한다. 
    success: function(responseData) { //서버로부터 성공적인 응답이 왔을 때 실행되는 함수다.
   
    },
    error: function(){ //서버로 보낸 요청이 실패했을 때 실행되는 함수다.
   
    }
    })
  • 사용방법
  • $("#btn-load-products").click(function(){
      //서버랑 HTTP통신해서 데이터 받아와서 표현하기
    //상품을 로딩하는 버튼을 클릭하면 콜백함수를 실행한다.
      $.ajax({
    //메소드 실행
      type:'GET',
    //type은 get방식으로
      url:'/script2/product/list.hta',
    //요청할 url
      dataType:'json',
    //데이터타입은 json으로 응답받을 것이다.
      success:function(products) {
    //요청응답이 성공적이면 함수를 실행한다.
      var $tbody = $('#table-products tbody');
      $.each(products,function(index, product){
    //배열로 요청이 오기 때문에 each메소드를 사용해서 product에 넣는다.
      var row = "<tr>";
        row += "<td>"+product.no+"</td>";
        row += "<td>"+product.name+"</td>";
        row += "<td>"+product.company+"</td>";
        row += "<td>"+product.price.toLocaleString()+" 원</td>";
        row += "<td><strong>"+product.discountPrice.toLocaleString()+"원</strong></td>";
        row += "</tr>";
       
        $tbody.append(row);
    //tbody자손으로 입력한다.
      })
      }
      });//ajax에게 객체를 전달해주는 것이다. 필요한 부분만 작성하면 된다.
      })
• getJSON(URL, data, function(data, status, hxr) { ... })
  • 응답컨텐츠가 JSON일 때 사용한다.
  • 사용방법
  • $("#table-boxoffice tbody").on('click', '.btn', function() {
    //미래에 생길 tbody에 클래스버튼이 생기고, 그 버튼을 클릭하면 콜백함수가 실행된다
    //클래스버튼을 클릭하면 이벤트가 발생한다.
    var movieCode = $(this).attr('date-movie-code');
    //get방식이고 JSON으로 데이터가 올것이라고 생각하고 이렇게 작성하는 것임
    //버튼을 실행시킨 객체의 data-movie-code의 속성은 변수 movieCode에 넣는다.
    $.getJSON("https://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json",
    //url :영화진흥원
    {key:"f5eef3421c602c6cb7ea224104795888", movieCd:movieCode },
    //전송할 data moviecd는 다른곳에서 출력된 코드가 있었다.
    function(result){
    //결과를 함수의 매개변수 result에 넣고 실행한다.
    var movie = result.movieInfoResult.movieInfo;
    //movieInfoResult안에 movieInfo안에 있는 결과값이 필요해서 경로를 변수에 저장한다.
    $("#movie-title").text(movie.movieNm);
    //해당하는 장소에 텍스트로 변환하여 입력한다.
    $("#movie-name").text(movie.movieNm);
    $("#movie-name-en").text(movie.movieNmEn);
    $("#movie-open-data").text(movie.openDt);
    $("#movie-show-time").text(movie.showTm +" 분");
    $("#movie-genre").text(movie.genres.map(item => item.genreNm).join(", "));
    //map()함수는 자바스크립트의 기존의 형태를 다른 형태로 바꾼다. 
    //item=>item.genreNm은 function(item){return item.genreNm}이다. 이걸 화살표함수로 변경
    //join은 배열을 구분자 ","을 사용해서 하나의 text로 합쳐주는 메소드이다
    $("#movie-audits").text(movie.audits.map(item => item.watchGradeNm).join(","));
    $("#movie-directors").text(movie.directors.map(item => item.peopleNm).join(","))
    $("#movie-actors").text(movie.actors.map(item => item.peopleNm).filter((item, index) => index < 5).join(","));
    //filter함수를 걸어서 5개까지만 출력되도록 화살표함수로 작성한다.
    $("#movie-companys").text(movie.companys.map(item =>item.companyNm).filter((item,index)=>index < 1).join(","));
    $("#movie-companys-staff").text(movie.companys.map(item =>item.companyNm).filter((item,index)=>index > 1).join(","))
    //모달창을 표시한다.응답이 와야지 바로바로 창이 뜰 수 있다.
    //앞에 있었던 데이터가 존재하다보니까 사용자에게 
    boxOfficeModal.show();
    });
    })

$each의 두가지 획득방법

• $("p").each(function(index, element))
  • p의 엘리먼트를 전달한다. 
  • 선택자함수로 선택된 엘리먼트의 갯수만큼 each(함수)의 함수가 실행된다. 
  • element에는 선택된 엘리먼트가 순서대로 전달된다. 
  • function안에서 사용되는 this에는 선택된 엘리먼트가 function이 실행될때마다 전달된다. 
  • 엘리먼트의 반복이다.
• $.each(배열명,fuction(index, item))
  • 배열안에 들어있는 item의 갯수만큼 전달된다. 
  • 배열에 저장된 값의 갯수만큼 each(배열, 함수)의 함수가 실행된다. 
  • item에는 배열에 저장된 값이 순서대로 전달된다. 
  • function안에서 사용되는this에는 배열에 저장된 값이 function이 실행될 때마다 전달된다. 
  • 배열의 function이다. 

$("#btn-get-data").click(function(){
var total = 0;
$ajax({
succes:function(result){
   $.each(result, function(index, item){  
    total += item.amount;
})//$(#data-total).text(total); 여기에 입력해야 제대로 된 값이나온다.
}
$(#data-total).text(total);   //0이나온다.
})
})

• $.ajax()는 응답이와야 실행할 수 있다. 입력값이 나오도록 하려면 ajax안에 작성해야한다. 
  그래야 응답이 오면 실행해서 제대로된 total값이 나오기 때문이다.