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

미세먼지 오픈 API
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
서울 미세먼지 100이상 데이터 가져오기

jQuery 연습하고 가기!

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

<style type="text/css">
    div.question-box {
        margin: 10px 0 20px 0;
    }

    .bad {
        color: red;
    }
</style>

<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 > 100){
                    temp_html = `<li class="bad">${gu_name} : ${gu_mise} </li>`     //미세먼지 >120 bad
                  } else{
                      temp_html = `<li>${gu_name} : ${gu_mise} </li>`
                  }

                  $('#names-q1').append(temp_html) //지우면안됌!
              }
          }
        })
    }
</script>

jQuery+Ajax의 조합을 연습하자!

<hr />

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
    </ul>
</div>