Ajax 요청 (상품 더보기 버튼 만들기)

 

서버란?

유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램
 
서버에 데이터를 요청할 때는
1. 어떤 데이터인지 url로 잘 기재해야하고
2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내야함 
(GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용, POST요청은 서버로 데이터를 보내고 싶을 때 사용)
 
 
 
 

AJAX란?

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX
 

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

ajax 요청 성공시 .done 안에 있는 코드를 실행
ajax 요청 실패시 .fail 안에 있는 코드를 실행
 
 
 
 
 

Ajax 요청,
상품 더보기 버튼 만들기

아래 버튼을 누를때마다 3개씩 상품정보가 뜨는 카드열을 만들것임
상품정보는 get요청을 통해 가져옴
 

 
 
 
 

• 자바스크립트 코드 짜서 카드3개 생성

var products = [
  {id:0, price: 70000, title: 'Blossom Dress'},
  {id:1, price: 50000, title: 'Springfield Shirt'},
  {id:0, price: 70000, title: 'Black Monastery'}
  ];
  
  //자바스크립트로 html을 만들어보자
  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(템플릿)
});

 
 
 
 

• 더보기버튼을 2번째 누르면 7,8,9번째 상품을 더 가져와서 html로 보여주십시오

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

function 카드만들기(data){ //data 값은 달라질 수 있으니 변수를 넣어주도록 하자
    console.log(data)
    //카드 레이아웃이 3개 생성, 일단 1개부터 만들어보도록 하자,  i는 0부터 끝까지 돌음
    data.forEach(function(item,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(템플릿)
    });
  }

  let count = 0; // let 을 함수밖으로 뺏을때와 그렇지 않을때의 차이점이 뭘까?
  //버튼을 누르면 get 요청으로 데이터 가져옵시다
  $('#more').on('click',function(){
    count = count + 1;
    if(count === 1){
      $.get('https://codingapple1.github.io/js/more1.json').done(function(data){
        카드만들기(data);
  });
    }
    if(count === 2){
      $.get('https://codingapple1.github.io/js/more2.json').done(function(data){
        카드만들기(data);
  });
    }
    
  });

왜 변수가 0으로 초기화되는 지 몰겟어요...