웹 개발일지-2주차 4일차 (Ajax)

jsonview 확장 프로그램

미세먼지 OpenAPI

Ajax 기본 골격

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

Url 자리에 원하는 api 링크를 연결하면 response 값이 연동된다.

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response['RealtimeCityAir']['row'][0])
  }
})

연결한 후 console.log(response[원하는 값])을 넣어주면 위치에 맞는 값이 출력!

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']
        console.log(gu_name, gu_mise)
    }
  }
})

ajax에서 if를 활용한 조건문

$.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)
        }
      
    }
  }
})

예제1.미세머지 출력값이 나오는 페이지 만들기

보기예시

예제2.따릉이 남은 숫자 나오는 그래프 만들기

따릉이 OpenAPI

보기예시1

보기예시2

예제3. 고양이

고양이 OpenAPI

보기예시

예제4. 환율

환율 OpenAPI

로딩 후 호출하기

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