[웹개발 종합반 2주차] Ajax 연습하기

🔖09.  Ajax 연습하기(1)

🔎 따릉이 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulbike

 

🔎 따릉이 대수 5대 미만인 곳은 빨갛게 표시

<style>
    .red {
      color: red;
    }
</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 staionName = rows[i]['stationName']
            let pakingBikeToCnt = rows[i]['parkingBikeTotCnt']
            let rackToCnt = rows[i]['rackTotCnt']

            let temp_html =''
            if(pakingBikeToCnt < 5){
              temp_html = `<tr class="red">
                                <td>${staionName}</td>
                                <td>${rackToCnt}</td>
                                <td>${pakingBikeToCnt}</td>
                            </tr>`
            }else {
              temp_html = `<tr>
                                <td>${staionName}</td>
                                <td>${rackToCnt}</td>
                                <td>${pakingBikeToCnt}</td>
                            </tr>`
            }
            $('#names-q1').append(temp_html)
          }
        }
      })
    }
</script>

---

🔖10.  Ajax 연습하기(2)

🔎 버튼 누를때마다 이미지와 메세지 변경

<script>
    function q1() {
// 여기에 코드를 입력하세요
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/rtan",
      data: {},
      success: function (response) {
        let msg = response['msg']
        let url = response['url']

        $('#img-rtan').attr("src", url)
        $('#text-rtan').text(msg)
      }
    })
    }
</script>

 

🔎 버튼 누를때마다 이미지 url변경

$("#아이디값").attr("src", 이미지URL)

 

🔎 버튼 누를때마다 이미지 덱스트 변경

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

 

 

---

☀️ 느낀점

이번에도 한번 안보고 스스로 풀어봤다. 연습하기 1번은 앞에 꺼와 동일해서 굉장히 수월하게 끝냈는데 2번은 text변경은 구글링해서 해결! 근데 이미지url변경은 검색해서 나온게 속성변경?

attributes("src",url)

사용했는데.. 갑자기 잘 바뀌던 텍스트도 안바뀌었다.

attributes는 속성모임이라 속성값을 변경할 때 사용하기 힘든듯 하다. NamedNodeMap은 배열처럼 반복될 수 있지만, join, split 등과 같은 Array에 있는 어떤 특수 메소드는 없다고 한다.

attribute를 의미하는 attr() 함수를 이용해야 한다.

 

결국, 강의 노트힌트를 얻어 해결

attr("src")

속성값을 가져올때 사용. image url값만 반환된다.

 

attr("src", url)

속성값을 변경할 때 사용.