[Ajax] api실습

jQuery + Ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/05.jQuery/js/jquery-3.6.0.min.js"></script>
</head>
</head>

<body>

    <div id="mv">
        <!-- 주간 인기영화 순위표-->
    </div>
    <button onclick="getData()">영화 데이터 요청</button>

    <script>
        function getData() {
            $.ajax({

                //url ->데이터의 주소
                url: 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=4f443bcfded5236e0a6bc3e4075d9b94&targetDt=20220501',
                //쿼리스트링? get/jsp에서 post로 설정? post
                type: 'get',
                success: function (res) {
                    //성공했다면? 내 데이터는 어디있을까? -> 매개변수
                    //Q.1위부터 10위까지 영화 제목 console창에 출력!!!!
                    // for(let i = 0; i <10; i++){

                    //     console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
                    // }
                    let data = ''

                    data += '<table><tr><th>순위</th><th>영화제목</th><th>개봉일자</th></tr>'

                    for (let i = 0; i < res.boxOfficeResult.weeklyBoxOfficeList.length; i++) {
                        let temp = res.boxOfficeResult.weeklyBoxOfficeList[i]
                        data += '<tr>'
                        data += `<td>${temp.rank}</td>`
                        data += `<td>${temp.movieNm}</td>`
                        data += `<td>${temp.openDt}</td>`
                        data += '</tr>'

                    }
                    data += '</table>'
                    $('#mv').prepend(data)



                    console.log(res)
                },
                error: function () {
                    alert('error!')
                }
            })
        }
    </script>
</body>

</html>

지도 api 사용해보기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도 생성하기</title>
    
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e2b3cd327f9d9e9c501b5ac8077ec684"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(35.11074920318669, 126.87774044009879), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>
</body>
</html>

차트 api사용해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
</body>
</html>

날씨 정보 api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/05.jQuery/js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>현재 날씨는?</h1>
    <div id="container"></div>
    <button onclick="getData()">날씨가져오기</button>

    <script>
        function getData(){
            $.ajax({
                url : 'https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495',

                type: 'get',
                success: function(res){
                    
                    
                    $('#container').append(`<p>현재온도 : ${res.main.temp}</p>`)
                    $('#container').append(`<p>최고온도 : ${res.main.temp_max}</p>`)
                    $('#container').append(`<p>최저온도 : ${res.main.temp_min}</p>`)
                    
                    console.log(res)

                },
                error: function () {
                    alert('error!')
                }
            })
        }

    </script>
</body>
</html>

날씨+차트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="/05.jQuery/js/jquery-3.6.0.min.js"></script>

    <style>
        #mychart{
            width: 400px !important;
            height:  400px !important;

        }
    </style>
</head>
<body>
    <h1>현재 날씨는?</h1>
    <button onclick="getData()">날씨가져오기</button>
    <div id="container"></div>
    <canvas id="myChart" width="400" height="400"></canvas>

    <script src = "./main.js"></script>
</body>
</html>

//main.js
function getData() {
    $.ajax({

        url: 'https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495',
        type: 'get',
        success: function (res) {

            $('#container').append(`<p>현재온도 : ${res.main.temp}</p>`)
            $('#container').append(`<p>최고온도 : ${res.main.temp_max}</p>`)
            $('#container').append(`<p>최저온도 : ${res.main.temp_min}</p>`)

            const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        //x축 데이터
        labels: ['현재온도', '최고온도', '최저온도'],
        datasets: [{
            label: '# of Votes',
            // x축 대응 데이터
            data: [res.main.temp, res.main.temp_max, res.main.temp_min],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

        },
        error: function () {
            alert('error!')
        }
    })
}

티스토리툴바