-2주차 Ajax 연습하기-

참고! Ajax는 Jquery가 import되야 쓸 수 있다.

 

- 미세먼지 OpenAPI를 활용한  Ajax 다뤄보기

 

Ajax(클라이언트와 서버간에 데이터를 주고받게 해준다.) 를 이용해 서울 구 별 미세먼지를 볼 수 있는 화면을 만들었다.

<script>
    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            data: {},
            success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']

                    let temp_html = ``
                    if (gu_mise > 70) {
                        temp_html = `<li class ='bad'>${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                                        $('#names-q1').append(temp_html)
                }
            }
        })
    }
</script>

 

일단 Ajax기본골격은 복붙했지만 하나씩 리뷰해보자면 Type은 기본적인 조회기능을 하는 "GET"을 썼다.

Url 주소에는 서울미세먼지 오픈API를 복붙, data는 뭔 지 모르겠으나 빈값이다.

 

success: function 는 아직 잘 모르겠다.