21.09.14. 3-1~3강 (복습)

 

[로딩 후 바로 실행]

 

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

function listing() {
    console.log('화면 로딩 후 잘 실행되었습니다');
}

 

 

 

 

 

 

 

function listing() {
    $.ajax({
       type: "GET",
       url: "http://spartacodingclub.shop/post",
       data: {},
       success: function (response) {
          let rows = 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']

              console.log(comment, desc, image, title, url);
           }
       }
   })
}

 

 

 

 

 

 

 

 

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

function listing() {
$('#cards-box').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = 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}"><h6 class="card-title">${title}</h6></a>
<p class="card-text">${desc}</p>
<b><p class="card-comment">${comment}</p></b>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}

 

 

 

 

 

temp_html= `....`의 내용을 아래 카드에서 추출해서 클리닝, 교체해주는 것

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