본문 바로가기
> 메모/JS

[JS] Ajax 정리 (3)

by 자몽주스 2024. 4. 7.
728x90
상품 더보기 버튼 누르면 상품3개(데이터) 가져오기 - get 이용
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
  
    <!-- -- 13-1) Ajax -->
    <div class="container">
      <div class="row"></div>
      <button class="btn btn-danger">더보기</button>
    </div>

    <!-- 스크립트 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="list.js"></script>
  </body>
</html>
JS
// -- 13-1) Ajax
var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
products.forEach((a, i) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[i].title}</h5>
    <p>가격 :${products[i]["price"]}</p>
  </div>
`;
  $(".row").append(템플릿);
  // console.log(a);
  console.log(products[i]);
});
$.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
  console.log(data);
});

성공했을 때 특정 코드를 실행

= > .done() 사용

 

= 이렇게 짠 경우, 페이지 로드할 때 ajax 요청을 1번 실행

 

더보기 버튼을 눌렀을 ajax 요청해야 함.

HTML
    <div class="container">
      <div class="row"></div>
      <button class="btn btn-danger" id="more">더보기</button>
    </div>

버튼에 id(more) 부여하기 

JS
$("#more").click(function () {
  $.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
    console.log(data);
  });
});

클릭 이벤트 리스너 부여

$("#more").click(function(){});

$("#more").click(function(){}); == $("#button").on("click", function(){});
** 클릭이벤트 리스너 동일

더보기 클릭할 때마다 배열 나옴

[ = array 

{ = object

데이터의 시작점 - array

그 안 - object 데이터 3개

가져온 데이터로 카드 3개 만들기
JS
// --Ajax- 더보기 누르면 상품 3개 갖고오기.
$("#more").click(function () {
  $.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
    console.log(data);

    var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${products[i].title}</h5>
      <p>가격 :${products[i]["price"]}</p>
    </div>
  `;
    $(".row").append(템플릿);
  });
});​

템플릿 변수를 이용해서 html 생성

 

products 데이터 말고 data 의 데이터를 꺼내면 됨.

<h5>${products[i].title}</h5>
<p>가격 :${products[i]["price"]}</p>

이 부분 수정해주면 됨.

forEach문 추가 = array 배열이니까 [] 
$("#more").click(function () {
  $.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
    console.log(data);

    data.forEach(() => {
      var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${data[0].title}</h5>
      <p>가격 :${data[0].price}</p>
    </div>
  `;
      $(".row").append(템플릿);
    });
  });
});

data 에서 배열을 반복

data[0].title

0 이라고 집어넣으니 하드코딩이라 바꿔야함

파라미터 a,  i  추가
// --Ajax- 더보기 누르면 상품 3개 갖고오기.
$("#more").click(function () {
  $.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
    console.log(data);

    data.forEach((a, i) => {
      var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${data[i].title}</h5>
      <p>가격 :${data[i].price}</p>
    </div>
  `;
      $(".row").append(템플릿);
    });
  });
});

data[i] 사용

$("#more").click(function () {
  $.get("https://codingapple1.github.io/js/more1.json ").done((data) => {
    console.log(data);

    data.forEach((a, i) => {
      var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${a.title}</h5>
      <p>가격 :${a.price}</p>
    </div>
  `;
      $(".row").append(템플릿);
    });
  });
});

a 로 치환해서 사용

둘이 동일하다

console.log 로 (a) 찍어보고 확인해봐도 됨.

 

728x90
저작자표시 비영리 변경금지

'> 메모 > JS' 카테고리의 다른 글

sort, map, filter 함수 (2)  (0) 2024.04.09
sort, map, filter 함수 (1)  (0) 2024.04.08
[JS] arrow function 문법 (화살표 함수)  (0) 2024.04.07
[JS] Ajax 정리 (2)  (1) 2024.04.05
[JS] Ajax 정리 (1)  (0) 2024.04.03

관련글

티스토리툴바