221019 2주 차 개발일지

Jquery & ajax 

 

헤드 코드안에 아래의 코드를 입력하면 

Jquery를 사용할 수 있다. 1주 차에서 사용한 부트스트랩과 비슷한개념이다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

css는 헤드태그안에 style태그 안에서 작성하고

자바스크립트(제이쿼리)는 헤드태그안에 script태그 안에서작성

 

d.XXX = class

#XXX = id

 

아래의 코드처럼 제이쿼리를 사용하면 간략하게 코드를 짤 수 있다.

function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}

 

 

ajax는 get방식으로 지정한 url을 바탕으로 서버데이터를 가져와서 데이터 가공이 가능하게 해준다.

정확한 설명은 못들었지만 json형식이나 다른 특정형식으로 저장되어있는 경우에 가능해보인다.

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    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']
            console.log(gu_name,gu_mise)
        }
    }
})