개발자는신이야
The first step
개발자는신이야
전체 방문자
오늘
어제
  • 분류 전체보기 (114)
    • 🍃웹개발 Spring (15)
    • ❓내 질문 (4)
    • 🔥웹개발종합반 (11)
    • 💻개인프로젝트 (5)
    • 😕error (2)
    • 💡알고리즘 (3)
    • 📖혼자공부하는자바 (22)
    • 📑WIL (2)
    • 🥸 CS 면접 스터디 (13)
    • 🤓천재교육 풀스택 1기 노트 (21)
    • ⏰정처기 공부 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • style
  • boot
  • db
  • API
  • CSS
  • SQL
  • HTML
  • jquery
  • JPA
  • CRUD
  • repository
  • dependencies
  • Lombok
  • Controller
  • 기초
  • Java
  • 변수
  • Spring
  • database
  • IntelliJ

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
개발자는신이야

The first step

Week2. Ajax
🔥웹개발종합반

Week2. Ajax

2022. 9. 12. 00:34

Ajax란

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

(참고: https://99geo.tistory.com/65)

 

저는 api 데이터 값을 받아올 때 ajax를 사용했습니다.

(훗날에 db도 ajax로 받아오더라구요)

 


api 데이터 가져올 때 TIP.

크롬 확장 프로그램 중 JSON View를 다운받는다.

그럼 api url로 접속시 아래 사진처럼 깔끔하게 json파일로 정리되어 보입니다.

 

Ajax사용하기.

ajax 기본 골격

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

가져올 url을 url: " " 부분에 넣어주면 됩니다!

.

.

.

원하는 데이터만 다 가져오고 싶을때는 for문을 같이 사용해주면 좋다.

let rows = response["RealtimeCityAir"]["row"]
for (i = 0; i < rows.length; i++) {
  let cityName = rows[i]["MSRSTE_NM"]

위 코드는 ajax기본 골격 안에 포함되어 있습니다.

 

즉. for문으로 반복하게 되어 row.length(row안의 값의 수만큼(전부)) response["RealtimeCityAir"]["row"]["MSRTE_NM"]을 받아오게 됩니다.

'🔥웹개발종합반' 카테고리의 다른 글

Week3. 파이참에서 Python 패키지(pip) 설치하기  (2) 2022.09.12
Week2 HomeWork 실시간 기온 api추가  (0) 2022.09.12
Week2. Jquery  (0) 2022.09.09
Week1 Homework. 아이유 팬명록  (0) 2022.09.09
Week1. css 라이브러리 Bootstrap 사용법  (0) 2022.09.06
    '🔥웹개발종합반' 카테고리의 다른 글
    • Week3. 파이참에서 Python 패키지(pip) 설치하기
    • Week2 HomeWork 실시간 기온 api추가
    • Week2. Jquery
    • Week1 Homework. 아이유 팬명록
    개발자는신이야
    개발자는신이야
    첫발을 내디딘 초보 개발자입니다.

    티스토리툴바