Ajax 연습

Ajax 기본 골격

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

OpenAPI(실시간 미세먼지 상태)

<script>
        function q1() {
            $('#names-q1').empty(); // 업데이트 버튼 누르면 지워지고 새로 나옴
            $.ajax({
                type: "GET",
                url: "url입력",
                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>`
                        }
                       
                        $('#추가할 id').append(temp_html); // 데이터 추가
                    }
                }
            })
        }
    </script>

OpenAPI(실시간 따릉이 현황)

* 원래 있던 내용이 자꾸 나오면 body에 있는 내용을 삭제해주면 됨
<style>
  .urgent {
            color: red;
            font-weight: bold;
        }
</style>

<script>
 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 rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        } else {
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        } 
</script>

강아지OpenAPI(버튼 클릭시 이미지 변경)

* jQuery 이미지태그 src 바꾸기(jQuery img 태그 이미지 주소 변경)
* $("#id").attr("src", imgurl);
<script>
  function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function(response){
  	      console.log(response[0]['url']) //콘솔 확인 후 삭제
              let imgurl = response[0]['url'];
              $("#img-cat").attr("src", imgurl);
            }
          })
      }
</script>