웹개발 종합반 2-2

ajax기본골격

$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})

ajax에 배워보았다. 새롭게 보다보니 아직 많이 서툴고 어색하다. 계속 하다보면 적응해 나아갈 것이라 생각이든다.
서울시 미세먼지를 가져와보는 연습을 했다.

미세먼지 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulair

위의 링크를 통해 미세먼지농도를 작성해보았다.

				$.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/seoulair",
                    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']

                            console.log(gu_name, gu_mise)

                            let temp_html = ``

                            if(gu_mise > 35) {
                                temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                            }else {
                                temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                            }

                            $('#names-q1').append(temp_html)
                        }
                    }
                })

미세먼지가 35이상인것은 빨간글씨로 나타나게 해보았다.

ajax작성전에

$('#names-q1').empty()

이 코드를 작성함으로써 버튼을 누르면 삭제시키는 코드를 작성하였다.