Ajax2

js015.html 파일을 생성하고 아래 코드를 붙여넣자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>
        </div>
    </div>

    <script>
        var products = [
            { id : 0, price : 70000, title : 'Blossom Dress' },
            { id : 1, price : 50000, title : 'Springfield Shirt' },
            { id : 2, price : 60000, title : 'Black Monastery' }
        ];
    </script>

</body>
</html>

✨ 실습. <div class="row"> 아래의 div 를 제거하고 script로 products의 갯수만큼 card 생성

제발 직접 짜보기 🤣

✨ 실습. 상품더보기 버튼 누르면 Ajax 로 데이터 가져와서 콘솔창에 출력

데이터 가져올 서버는 아래 URL 사용

https://gist.githubusercontent.com/leeanJP/3ee931feb393f95895bd652344d1bf13/raw/d255a58907156433ef61de8401bf16564df4407f/more1.jsonarrow-up-right

가져온 데이터를 확인해보면 json 형태가 아닌 string으로 받아온다.

이럴때는 JSON.parse(string) 함수로 string > json 형변환을 할 수 있다.

(이전에 parseInt parseFloat 함수 처럼 형변환을 위해 사용하는 것)

✨ 실습. 위에서 가져온 데이터로 카드 3개 만들기

지금은 서버와 DB가 따로 없어서 이런식으로 구현 했지만 나중에 데이터베이스와 java Spring

까지 배우고 나면 내 PC에 데이터베이스를 만들고 서버 프로그램을 구현해서 데이터를 가져오는 방식으로 프로그램을 짜게 될것임.

그렇게 하면 총 데이터의 갯수를 구하고, 처음에는 0번부터 19번까지 20개만 데이터를 가져오고 상품더보기를 클릭하면 상품더보기 버튼을 클릭한 횟수를 기억 했다가 20번부터 39번까지의 데이터를 가져오고 마지막에 가서는 상품 더보기 버튼을 숨기는 식으로 구현할 수 있다.

이게 우리가 보는 쇼핑몰의 20개씩 상품보는 페이지의 작동방식

20개씩 보기 > 50개씩 보기로 변경하면 가져오는 데이터 갯수만 변경하고 작동하는 방식은 같다.

현업에서 사용하는 Ajax 코드 예제1

현업에서 사용하는 Ajax 코드 예제2

Last updated