Ajax 활용(코딩애플 URL 활용)

지난번에 배웠던 JS로 HTML 만들기와 AJAX를 활용해서 더보기 버튼을 누르면 새로운 상품이 나타나는 실습을 해보겠다.

 

[결과물]

 

body 기본틀

<div class="container">
    <div class="row">

    </div>
</div>

 

 

1. JS로 HMTL만들기(카드 3개 만들기)

 

// 데이터

var products = [
            { id: 0, price: 70000, title: 'Blossom Dress', img: 'https://image.msscdn.net/images/style/detail/7671/detail_7671_1_500.jpg' },
            { id: 1, price: 50000, title: 'Springfield Shirt', img: 'https://image.msscdn.net/images/style/detail/13007/detail_13007_2_500.jpg' },
            { id: 2, price: 60000, title: 'Black Monastery', img: 'https://image.msscdn.net/images/style/detail/14138/detail_14138_1_500.jpg' }];

// forEach 문으로 HTML을 생성하는 함수에 데이터를 넣어 HTML 생성
        
products.forEach((a) => {
    createTempale(a);
});

// HTML을 생성하는 함수

function createTempale(item) {
    var template = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>${item.price}</p>
            </div>`
            $('.row').append(template);
}

 

 

 

2. 더보기 버튼 만들기 + Ajax로 데이터 통신하기  

[데이터 통신]

$('.btn').on('click', function () {
    $.get('https://codingapple1.github.io/js/more1.json').done(function (data) {
        data.forEach((a) => {
            createTempale(a); 
        });
        console.log('데이터 통신 성공')
    }).fail(function () {
        alert('데이터 통신에 실패하였습니다.')
        console.log('데이터 통신 실패')
    })
});

 

데이터 통신에 성공하면 forEach문과 서버에서 오는 데이터를 바탕으로 새로운 3개의 카드를 만든다.

 

[더보기 버튼]

<div class="container" style="text-align: center;">
    <button class="btn btn-danger">더보기</button>
</div>

부트스트랩으로 더보기 버튼을 만든다.

 

 

 

 

3. 더보기 버튼을 2번 누르면 새로운 데이터를 가져와 새로운 카드들을 만든다.

https://codingapple1.github.io/js/more1.json 에서 4 5, 6 상품 데이터를 가져와 카드를 만들고 한번 더 더보기 버튼을 클릭 했을 때는

https://codingapple1.github.io/js/more2.json 에서 7, 8, 9 품 데이터를 가져와 카드를 만들게 하려면 어떻게 해야할까?

 

내가 생각한 로직은 아래와 같다.

URL의 형태는 more1, more2 말고는 동일한 형태이기 때문에 이점을 이용하려고 한다. 

1. 더보기 버튼 클릭 횟수를 변수에 저장한다. 
2. 해당 변수를 URL의 more 뒤에 넣는다.

 

이렇게 진행하면 클릭 횟수가 한번 일 때는 more1.json에 두번일 때는 more2.json에서 데이터를 가져와 가져오는 데이터가 달라지게 된다.

 

var moreBtnClickCount = 0;

$('.btn').on('click', function () {
    moreBtnClickCount+=1;
    $.get('https://codingapple1.github.io/js/more'+ moreBtnClickCount +'.json').done(function (data) {
        data.forEach((a) => {
            createTempale(a);
        });
        console.log('데이터 통신 성공')
    }).fail(function () {
        console.log('데이터 통신 실패')
        alert('데이터 통신에 실패하였습니다.')
    })
    if (moreBtnClickCount > 1){
        $('.btn').css('display', 'none');
    }
});

function createTempale(item) {
    var template = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>${item.price}</p>
            </div>`
            $('.row').append(template);
}