[jQuery] Ajax 기본 골격과 로딩 직후 호출 방법

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

jQuery로 Ajax 콜을 하는 기본 골격이다. 여기에서 URL 위치에 openAPI 주소를 붙여 넣는다.

이렇게 서버에서 데이터를 response 받아와서 <li>나 <tr>,<td> 등으로 tempHtml을 구성한 다음,

.append(tempHtml)로 원하는 화면에 뿌려주면 된다.

이미지를 바꾸는 것은 .attr("src", 이미지URL) 형태로 <img> 태그의 src 어트리뷰트 값을 수정해 준다.

 

서울시 실시간 미세먼지, 서울시 실시간 따릉이 현황, 랜덤 이미지, 날씨 API 등이 강의에서 제공되어 다양하게 실습해 볼 수 있었다.

로딩 직후 호출

$(document).ready(function(){
    alert('다 로딩됐다!')
});

날씨 API의 경우 click 이벤트로 함수가 실행되는 것이 아니라, 페이지 로딩이 끝나면 실시간 기온이 바로 떠야 한다.

그래서 $(document).ready()를 사용해 바로 Ajax를 호출하고, 기온 데이터를 .text(temp) 로 업데이트 해주었다.

2주차 과제 - 현재 기온 표시

---

Reference>

• [스파르타코딩클럽] 웹개발 종합반 (항해99 사전 강의 수강 중)