Ajax

Ajax 란?

javascript로 페이지 전환없이 서버에서 API 창구를 통해 JSON 포맷으로 값을 받아오는 방법.

*참고) Ajax 는 jQuery를 임포트 한 페이지에서만 동작가능하다!

API 의 주된 형식

• GET : 데이터 조회(read) 요청할 때 (영화목록 조회 등)
• POST : 데이터 생성(create), 변경(update), 삭제(Delete) 요청할 때
  (회원가입/탈퇴, 비번수정 등)

JSON 형식은 list 와 dic 의 조합과 똑같이 생겼다. (jsonview로 깔끔하게 봄)

List 안에 dic 여러개 들어있는 것 : Javascript 의 for 반복문의 전형적인 패턴.

for (let i = 0; i < something.length; i++) {

let name = rows[i][‘stationName’] 
let temp_html = `${name}`
$(‘#위치’).append(temp_html) } 

이렇게 for문과 temp_html 을 동시에 사용가능.

ajax 형식

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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']
        if (gu_mise < 70) {
        console.log(gu_name,gu_mise)
        }
    }
  }
})

GET 방식으로, url 의 정보를 받아, response 값을 받는다.
받은 response 값 중에 필요한 것(ex. rows)을 설정하고,
for 문으로 나열한다.

 let temp_html = ``
      if (gu_mise > 70) {
      	temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
      } else {
        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
      }
      $('#names-q1').append(temp_html)

그 나열한 값을 temp_html 문자열로 만들어주고, $('#원하는 곳') 에 표시.