스파르타코딩 내일배움단5

5일차

Ajax 연습하기

- 따릉이 데이터

거치대 수와 현재 거치된 따릉이 수를 나타내고, 현재 거치된 따릉이 수가 5개 이하이면 빨간색으로 표시해줌

// 전체 코드
<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>

- 랜덤 르탄이

이미지 바꾸기

// "src"는 scr 값을 바꿔주고 싶다고 적은 것
$("#아이디값").attr("src", 이미지 URL);

텍스트 바꾸기

$("#아이디값").text("바꾸고 싶은 텍스트");

// 전체 코드
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function(response){
let imgurl = response['url'];
$("#img-rtan").attr("src", imgurl);

let msg = response['msg'];
$("#text-rtan").text(msg);
}
})
}
</script>

- 과제

로딩 후 호출하기

// function 안에 실행할 코드 넣으면 됨!
$(document).ready(function(){
	alert('다 로딩됐다!')
});

// 전체 코드
<script>
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                        let temp = response.temp;
                        $(".weather").text(temp + "도");
                }
            })
        });
    </script>

궁금한 점 : 로딩 후 1초 정도 텀이 있어 온도가 바로 나타나지 않는데, 해결할 수 있는 방법이 있을지 궁금함