ajax 기초

1. 미세먼지 api 에서 값을 가져와 표시해주기

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="bed">${gu_name} : ${gu_mise}</li>`
                } else {
                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                }
                $('#names-q1').append(temp_html);
            };

        }
    })
}

 

2. 따릉이 api 가져와서 table 안에 넣어주기

function q1() {
    // 여기에 코드를 입력하세요
    $('#names-q1').empty();
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulbike",
        data: {},
        success: function (response) {
            let rows = response['getStationList']['row'];
            for (let i = 0; i < rows.length; i++) {
                let local = rows[i]['stationName'];
                let cnt = rows[i]['rackTotCnt'];
                let parkingCnt = rows[i]['parkingBikeTotCnt'];

                let temp_html = ``;
                if (parkingCnt < 5) {
                    temp_html = `
                                    <tr class="red">
                                        <td>${local}</td>
                                        <td>${cnt}</td>
                                        <td>${parkingCnt}</td>
                                    </tr>`
                } else {
                    temp_html = `
                                    <tr>
                                        <td>${local}</td>
                                        <td>${cnt}</td>
                                        <td>${parkingCnt}</td>
                                    </tr>`
                }
                $('#names-q1').append(temp_html);
            }
            ;

        }
    })
}

 

3. 버튼 클릭할 때 마다 고양이 사진 랜덤으로 나오는 function

function q1() {
      // 여기에 코드를 입력하세요
      $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function (response) {
              let imgurl = response[0]['url'];
              $('#img-cat').attr('src', imgurl);
          }
      })
  }