[jQuery] Ajax 연습 (GET)

 1. 먼저 jQuery를 임포트 한다.

<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

 

2. Ajax의 기본 골격을 입력한다. (예시는 GET요청)

<script>

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

url에 jason형식의 api url을 입력한다.

위처럼 콘솔에 response를 찍어 데이터를 확인한다.

 

 

3. 필요한 형식으로 다음과 같이 사용 해본다!

<script>
    function q1() {
        $('#names-q1').empty()
        $.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']
                    let temp_html=``
                    if (gu_mise > 40) {
                        /*선언은 위해서 했기 때문에 let은 지우고 데이터만 바꿈*/
                        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>

위 내용은 q1 이라는 함수를 사용하면 미세먼지 api를 받아 오게 되고, 그것을 rows라는 list를 만들어서 지역과 미세먼지 수치만 뽑은 후 반복문을 통하여 names-q1이라는 ID를 가진 곳에 계속 붙여주는 작업을 하는 것이다. 추가적으로 미세먼지 농도가 40 이상인 경우 bad라는 class를 넣어 style에서 글씨가 빨갛게 나오도록 설정 하였다.