ajax 데이터 받아와서 화면에 표시하기
데이터 형태
{"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);
});