자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근 (JavaScript Asynchronous communication Ajax)

자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근

(JavaScript Asynchronous communication Ajax)

▶ 목표

영화진흥위원회 오픈 api에서 주간/주말 박스오피스 데이터 접근
자바스크립트 ajax를 이용해 사용자가 날짜를 입력하면 해당 날짜의 데이터에 맞는 영화랭킹, 영화명, 개봉일자가 나오는 테이블 출력하기

1. 영화진흥위원회 오픈 api에서 JSON 가져오기

2. 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="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
    
    <script>
        let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101'
        
        $.ajax({
            url : url,
            type : 'get',
            success : (res)=>{
                console.log(res)
            },
            error : ()=>{
                console.log('통신 실패')
            }
        })
    </script>
</body>
</html>

3. 사용자로부터 날짜를 입력 받고, 날짜에 맞는 데이터를 가져와 영화랭킹, 영화명, 개봉일자가 담긴 테이블을 출력하기

<!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://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
    <input id="date">
    <button id="btn">데이터 가져오기</button>
    
    <script>
        $('#btn').click(()=>{
            let date = $('#date').val()
            // 백틱 이용
            let url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=${date}`
            
            $.ajax({
                url : url,
                type : 'get',
                success : (res)=>{
                    console.log(res)
                    let list = res.boxOfficeResult.weeklyBoxOfficeList
                    
                    // 테이블 생성 후 1행 랭킹, 제목, 개봉일자 
                    let movieTable = document.createElement('table')
                    let tr1 = document.createElement('tr')
                    let ranking = document.createElement('td')
                    let name = document.createElement('td')
                    let date = document.createElement('td')
                    
                    ranking.innerText = '랭킹'
                    name.innerText = '제목'
                    date.innerText = '개봉일자'

                    tr1.appendChild(ranking)
                    tr1.appendChild(name)
                    tr1.appendChild(date)
                    movieTable.appendChild(tr1)

                    document.getElementsByTagName('body')[0].appendChild(movieTable)

                    // for문을 이용하여 랭킹,제목,개봉일자를 가져와 appendChild로 붙이기
                    for (let i = 0; i<list.length; i++ ){
                       let tr2 = document.createElement('tr')
                       let rank = document.createElement('td')
                       let movieNm = document.createElement('td')
                       let openDt = document.createElement('td')

                       rank.innerText = list[i].rank
                       movieNm.innerText = list[i].movieNm
                       openDt.innerText = list[i].openDt

                       tr2.appendChild(rank)
                       tr2.appendChild(movieNm)
                       tr2.appendChild(openDt)

                       movieTable.appendChild(tr2)

                    }
                },
                error : ()=>{
                    console.log('통신 실패')
                }
            })

        })
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바스크립트 비동기 통신 기본 (JavaScript Asynchronous communication) (0)	2023.01.21
자바스크립트 jQuery 기본 문법 (JavaScript jQuery) (0)	2023.01.20
자바스크립트 DOM (JavaScript Document Object Model) (0)	2023.01.15
자바스크립트 객체 (JavaScript Object) (0)	2023.01.15
자바스크립트 함수 (JavaScript Function) (0)	2023.01.14