JQuery로딩 후 호출(영화 정보)

SONA·2021년 11월 10일
0

Javascript

목록 보기
8/9

로딩 후 바로실행

<script>
 $(document).ready(function(){
  $('#cards-box').empty(); // 작업 끝난 후, 원래 있던 카드정보 지우기
  listing();
});

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다'); // 확인 후, 삭제
  	$.ajax({
	  type: "GET",
	  url: "http://spartacodingclub.shop/post",
	  data: {},
	  success: function(response){
			console.log(response) // 확인 후, 삭제
  			console.log(response['articles']) // 확인 후, 삭제
  			let articles = response['articles']; // articles를 돌면서, 하나씩 출력
		 	for (let i = 0; i < articles.length; i++) {
    * article 내용(comment, desc, image, title, url)으로 HTML을 만듬
			 let article = articles[i];
			 let image = article["image"];
                         let url = article["url"];
                         let title = article["title"];
                         let desc = article["desc"];
                         let comment = article["comment"];
                         let temp_html = `<div class="card">
                                             <img class="card-img-top" src="${image}" alt="Card image cap">
                                             <div class="card-body">
                                               <a href="${url}" target="_blank" class="card-title">${title}</a>
                                               <p class="card-text">${desc}</p>
                                               <p class="card-text comment">${comment}</p>
                                             </div>
                                           </div>`;
                         $('#cards-box').append(temp_html);
	  }
	})
} 
</script>

0개의 댓글