ajax 데이터 받아와서 화면에 표시하기

데이터 형태

• js의 object형태와 비슷

{"brand" : "Hyundai", "model" : "Kona", "price" : 30000, "img" : "https://codingapple1.github.io/kona.jpg"}

전체 코드

//bootstrap card참고
<div class="card">
  <img src="..." class="card-img-top" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

//버튼 클릭시, 데이터 받아오고, 화면에 표시
$(".show-product-btn").on("click", function () {
  $.ajax({
    url: "https://codingapple1.github.io/data.json",
    type: "GET",
  }).done(function (e) {
    $(".card-title").html(e.model);
    $(".card-text").html(e.price);
    $(".card-img-top").attr("src", e.img);
  });
});

데이터 받아오기

$.ajax({
  url: "https://codingapple1.github.io/data.json",
  type: "GET",
})

데이터를 화면에 보이게 하기

• 데이터가 자바스크립트의 객체 형태로 저장되어있다.
  • 데이터를 e.model 객체 형태로 써야 한다.

.done(function (e) {
  $(".card-title").html(e.model);
  $(".card-text").html(e.price);
  $(".card-img-top").attr("src", e.img);
});