[자바스크립트] Ajax GET/POST

서버에 데이터를 보내거나(POST)

서버에서 데이터를 읽을 때(GET)

 

어떻게 GET/POST를 요청하는가?

 

AJAX를 이용해서 get,post요청을 해보자.

 

$.get('https://codingapple1.github.io/price.json').done(function(data){
    console.log(data);
}).fail(function(){
    console.log('실패');
});

 

$get('url주소').done()으로 get요청할 수 있다.

done()에는 콜백함수를 넣는데,

done(function(data)){})와 같이 인자를 넣어주면, 해당 변수에 데이터가 담기게 된다.

GET을 실패할 경우에는 .fail()이 실행된다.

 

---

더보기 버튼 만들기

더보기 버튼을 누르면, 서버에서 물품정보 3개를 받아와서 카드3개를 추가하기

 

function makeCard(data) {
    var card = `      <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${data.title}</h5>
        <p>가격 : ${data.price}</p>
      </div>`;
    $('.row').eq(0).append(card);
}

우선 카드를 만드는 함수이다.

data를 받아서 적절한 카드를 만든다.

var more_click = 1;
$('#more').on('click', function () {

    $.get(`https://codingapple1.github.io/js/more${more_click}.json`).done(function (data) {
        for (var i = 0; i < data.length; i++) {
            makeCard(data[i]);
        }
        more_click++;
        if (more_click > 2) {
        $('#more').addClass('form-hidden');
    }
    });
    
});

이제 more버튼이 눌리면, GET으로 서버에서 데이터를 받는다.

한번 누르면 4,5,6번 물품정보가 오고 두번 누르면 7,8,9번 물품 정보가 오는데,

url주소가 각각 1,2로 끝나기 때문에

클릭횟수를 변수에 저장해서 횟수에 맞는 url이 입력되게 하였다.

 

데이터를 받아오면 반복문을 이용하여 카드를 생성하고, 클릭횟수를 늘린다.

클릭횟수가 2번이 넘었다면 더이상 데이터가 없으므로 더보기버튼을 form-hidden 클래스를 부착하여 보이지 않게 했다.