Ajax 활용하기

오늘은 Ajax를 활용하여 openAPI를 사용하는 방법을 다뤄보았다.

onclick,그리고 $(document).ready로 호출하는 두가지 방법으로 활용해 보았고 코드는 다음과 같다.

$.ajax({
        type: "GET",
        url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
        data: {},
        success: function(response){
            $('#names-q1').empty()
            let mise = response['RealtimeCityAir']['row']
            mise.map((value,index) => {
                let gu = value['MSRSTE_NM']
                let pm = value['IDEX_MVL']
                if (pm>70){
                    $('#names-q1').append(`<li class="bad">${gu} : ${pm}</li>`)
                }else{
                    $('#names-q1').append(`<li >${gu} : ${pm}</li>`)
                }
            })
            console.log(response)
        }
    })
}

 

위 코드는 서울시 구별 미세먼지 딕셔너리 리스트를 불러와서 필요한 값을 추출 후 나타내는 것이다.

function q1() {
  //Ajax
    $.ajax({
        type: "GET",
        url: "https://api.thecatapi.com/v1/images/search",
        data: {},
        success: function(response){
            $('#img-cat').attr("src",response[0]['url'])
            console.log(response[0]['url'])
        }
    })
}

 

위 코드는 onclick 시 랜덤 고양이 사진을 불러오는데 활용하였다.

$('id-name').attr("속성",값)을 하면 쉽게 값을 바꿀 수 있다는것을 알았다.

function q1() {
    //Ajax
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulbike",
        data: {},
        success: function(response){
            $('#names-q1').empty()
            let bike = response['getStationList']['row']
            bike.map((value,index) => {
                let gu = value['stationName']
                let slot = value['rackTotCnt']
                let parking = value['parkingBikeTotCnt']
                if (parking<10){
                    $('#names-q1').append(`<tr>`)
                    $('#names-q1').append(`<td class="redm">${gu}</td>`)
                    $('#names-q1').append(`<td class="redm">${slot}</td>`)
                    $('#names-q1').append(`<td class="redm">${parking}</td>`)
                    $('#names-q1').append(`</tr>`)
                }else{
                    $('#names-q1').append(`<tr>`)
                    $('#names-q1').append(`<td>${gu}</td>`)
                    $('#names-q1').append(`<td>${slot}</td>`)
                    $('#names-q1').append(`<td>${parking}</td>`)
                    $('#names-q1').append(`</tr>`)
                }
            })
            console.log(response)
        }
    })
}

 

위 코드는 HTML의 <table>,<thread>태그에 <tbody>부분에 들어가는 요소들을 갱신시켜주는데 표 형식으로 나타내고 갱신하는 방법을 연습하였다.