웹개발 Week2

서버와 클라이언트 간의 통신

API

• Get : 특정 key를 요청값에 담으면 key에 맵핑된 데이터를 응답하는 방식
• Post : 특정 필드에 정보를 업데이트 하는 방식

Ajax 이해

 $.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 stationname = rows[i]['stationName']
                    let totalcount = rows[i]['rackTotCnt']
                    let parkingcount = rows[i]['parkingBikeTotCnt']
                    let temp_html = ``

                    if(parkingcount < 5) {
                        temp_html = `<tr class = "little">
                                        <td>${stationname}</td>
                                        <td>${totalcount}</td>
                                        <td>${parkingcount}</td>
                                        </tr>`

                     } else {
                        temp_html = `<tr class = "enough">
                                        <td>${stationname}</td>
                                        <td>${totalcount}</td>
                                        <td>${parkingcount}</td>
                                        </tr>`
                    }
                    $('#names-q1').append(temp_html)

작성 순서

• script 태그 내 ajax 기본 포맷 붙여넣기

• console.log로 API 내 특정 필드의 key, value 확인

• 특정 필드 응답 값을 가져올 때 value값은 response['keyname'] 로 가져올 수 있음

• 모든 데이터를 순서대로 가져올 때 for문 활용

• temp_html : 응답값을 노출할 포맷 정의

• id값 기준 어떻게 "함수" 노출할지 결정

배운 함수

• append(temp_html) : 사전 정의한 포맷 대로 응답값 그대로 붙여넣기
• attr : 응답값을 특정 속성의 값으로 교체 (예 img src "url" 교체)
• text : 응답값을 정해진 필드의 텍스트 포맷으로 교체 (예, 르탄이 이름이나 서울시 현재 온도 교체)