02 처음 만난 jQuery와 Ajax

01 jQuery

• jQuery는 미리 작성된 Javascript 코드들의 라이브러리로, 사용하려면 아래와 같이 "임포트(import)"해야 한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

• 자주 쓰이는 몇 가지 jQuery 기능에 대해서도 배웠다.(아래 예시들에서 post-rul에 해당하는 부분은 id에 해당)
  • 값을 불러오기 : $('#post-url').val();
  • div 숨기기 / 나타내기 : $('#post-box').hide();   /   $('#post-box').show();
  • css값 가져와보기 : $('#post-box').css('display');
  • 태그 내 텍스트 입력하기 (1. input box의 경우) : $('#post-url').val('여기 텍스트 입력');
  • 태그 내 텍스트 입력하기 (2. 그 외 - (예)버튼) : $('#btn-posting-box').text('포스팅 박스 닫기');

02 Ajax

• 서버에 데이터를 요청하여 로드하는 기법 ('비동기적'인 방식이라는 게 핵심적인 것 같지만 아직 잘 모르겠다..ㅎㅎ)
• Ajax가 쓰이는 기본골격은 아래와 같다.

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