스파르타코딩클럽 [웹개발] 2주차 (2)

1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.

3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

2주차 마지막 Ajax에 대해 알아보자.
※ Ajax는 jQuery가 임포트되어 있을 때에만 사용이 가능하다.
그렇지 않을 경우

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력", //여기에 보통 API주소를 넣어서 사용한다
  data: {},
  success: function(response){
    console.log(response)
  }
})

Ajax 코드 설명

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "API주소 / 데이터를 가지고올 주소",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },

이렇게 Ajax에 대한 기초를 배운 후 적용해보았다.

(url주소는 스파르타코딩클럽에서 제공받았기에 지웠다 / 서울시 날씨 데이터다)

GET방식으로 서울시 날씨 데이터에서 'temp'(온도)값을 가져와 text값으로 id = "temp" 값을 가진 span태그 안에 넣어준다.

또한

 $(document).ready(function() {});

을 이용하여 로딩되면 해당 값이 실시간 데이터값으로 변화한다.

글을 쓰는 와중에 기온이 2도나 올랐다