코딩 도전기_11_210712

학습 내용

- Ajax 적용 연습

REVIEW : 나 홀로 메모장 카드에 영화 정보 가져오기

(1) Ajax 뼈대, 오픈 API 주소 가져오기

<script>
        $(document).ready(function () {
            listing();
        });
        //<페이지 로딩하자마자 실행>

        function listing() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
               }
               
                    })
        }
</script>     

(2) 반복문,dictionary 이용해 필요한 정보를 가져오기

<script>
        $(document).ready(function () {
            listing();
        });
        //<페이지 로딩하자마자 실행>

        function listing() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                let response = response['articles']
                for (let i=0; i<rows.length; i++) {
                let comment = rows[i]['comment']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let title = rows[i]['title']
                let url = rows[i]['url']
                }
               }
                })
        }
</script>  

(3) temp_html, append 이용해 html 붙이기

• 먼저 각 항목을 카드에 붙여야 하므로 위에서 설정한 변수들을 각각 카드의 어떤 항목에 적용해야 하는지 확인
• 기존

<div class="card">
    <img class="card-img-top"
    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
    alt="Card image cap">
  <div class="card-body">
      <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
      <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
      <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
  </div>
</div>

• 적용

<div class="card">
    <img class="card-img-top"
    src="${image}"
    alt="Card image cap">
  <div class="card-body">
      <a href="${url}" class="card-title">${title}</a>
      <p class="card-text">${desc}</p>
      <p></p>
      <p class="comment">${comment}</p>
  </div>
</div>

• 위 코드를 temp_html 이용해 붙여준다

<script>
$(document).ready(function () {
   listing();
   $('cards-box').empty()
   //기존에 있는 카드를 삭제하고 리스트를 불러와야 하므로 empty 이용해 비워줌
});
//<페이지 로딩하자마자 실행>

function listing() {
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/post",
    data: {},
    success: function (response) {
    let response = response['articles']
                  for (let i=0; i<rows.length; i++) {
                  let comment = rows[i]['comment']
                  let desc = rows[i]['desc']
                  let image = rows[i]['image']
                  let title = rows[i]['title']
                  let url = rows[i]['url']

     let temp_html = `<div class="card">
                        <img class="card-img-top"
                        src="${image}"
                        alt="Card image cap">
                          <div class="card-body">
                              <a href="${url}" class="card-title">${title}</a>
                              <p class="card-text">${desc}</p>
                              <p></p>
                              <p class="comment">${comment}</p>
                          </div>
                      </div>`
    $('#cards-box').append(temp_html)
                    }
                   }
                    })
        }
</script>