2주차_ jQuery, Ajax

1. jQuery : html 의 요소들을 조작, 미리 작성된 javascript 코드를 사용 --> import 필요

 

** 주요 내용 **
(1) 직관적, 간단한 코드의 사용
(2) $('#articleUrl').val(); -->form 'id' 특정 --> 값을 가져옴
(3) $('#btnPostingBox').text('a') -> 닫기, 열기처럼 text 값을 바꿈
(4) url 백틱 사용 -> html 문법 사용, 줄 바꿈 용이, 변수로 설정된 값을 ${} 문법을 통해 사용 가능

2. Ajax : 화면의 전환 없이 server에서 값을 받아옴, JQuery 임포트 필요
get : 데이터 조회용 (클라이언트 -> 서버)
post : 생성, 변경, 삭제 요청

항상 사용 할 기본 문법: 
$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

** response 는 변수 명일 뿐 값을 받는 역할만 한다

 

+ 사용 했던 api 
(1) 고양이 랜덤 이미지 api
https://api.thecatapi.com/v1/images/search
(2) 환율 api
http://spartacodingclub.shop/sparta_api/rate

+  로딩 후 바로 호출하기
        $(document).ready(function (){
            q1(); // function 이름
        });

 

3. 2주차 과제

api json 정보 활용 현재 환율 노출

코드: 

<script>
    // 로딩 후 바로 호출하기
    $(document).ready(function (){
        q1();
    });

    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {},
            success: function (response) {
                let date = response['date']
                let rate = response['rate']

                let temp_html = ` ${date} : ${rate}`
                //console.log(temp_html)
                $('#rate-now').append(temp_html)
            }
        })
    }
</script>