웹개발 2주차 개발일지(3) - Ajax 연습하기

● 실시간 따릉이 정보를 알아보자.

업데이트 버튼을 누르면 실시간 따릉이의 정보가 나오게하자.

실시간 정보 →http://spartacodingclub.shop/sparta_api/seoulbike

먼저 기본 골격부터 입력 후 콘솔창에 찍어본다.

        function q1() {
          $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
              console.log(response)
            }
          })
        }

이제 하나씩 찍어주기 위해 반복문으로 돌린 후, 여기서 필요한 정보가 어디에 들어있는지 보고 찍어보자.

> 거치대 위치, 거치대 수, 현재 남은 수

변수를 선언해 찍어보자.

        function q1() {
          $.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 name = rows[i]['stationName']
                    let rack = rows[i]['rackTotCnt']
                    let bike = rows[i]['parkingBikeTotCnt']
                    console.log(name, rack,bike)
                }
            }
          })
        }

이제 페이지에 찍어보자!

                        let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                        $('#names-q1').append(temp_html)

이제 새로고침하면 기존에 있던 것은 없어지고 새로 나오도록 하자.

            $('#names-q1').empty()

여기서 특정 갯수 미만인 경우 빨간색으로 나타내자.

먼저 css로 설정을 해주고 조건문으로 나누어준다.

                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html = ``
                        if (bike < 5) {
                            temp_html = `<tr class="urgent">
                                                <td>${name}</td>
                                                <td>${rack}</td>
                                                <td>${bike}</td>
                                            </tr>`
                        } else {
                            temp_html = `<tr>
                                                <td>${name}</td>
                                                <td>${rack}</td>
                                                <td>${bike}</td>
                                            </tr>`
                        }
                        $('#names-q1').append(temp_html)
                    }

 

---

 

● 랜덤 이미지API를 이용하여 버튼을 누르면 이미지가 바뀌게 하자.

이미지API→ http://spartacodingclub.shop/sparta_api/rtan

뼈대 코드는 코드스니펫을 사용했다.

여기서 시작해보자.

우선 콘솔창에 찍어보자.

      function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function (response) { 
            console.log(response)
          }
        })
      }

버튼을 누를때마다 다른 이미지정보가 나온다.

여기서 텍스트와 이미지만 따로 가져오자.

            let msg = response['msg']
            let image = response['url']
            console.log(msg,image)

이제 페이지에 연결해보자.

그런데 여기서 이미지파일과 텍스트를 따로 붙여야한다.

//이미지바꾸기
$('#아이디값').attr('src',이미지url)
//텍스트바꾸기
$('#아이디값').text('바꾸고싶은 텍스트')

적용해보자.

            $('#img-rtan').attr('src',image)
            $('#text-rtan').text(msg)

버튼을 누를때마다 새로운 API가 적용된다.