-2주차 끝& 숙제-

2주차 숙제가 아주 간단해보이면서도 막상 할려니 뭐부터 해야 할지 몰랐다. 그래서 구글링을 통해 복습을 먼저 하였다.

 

Ajax 기본 골격

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

출처: https://velog.io/@jisoolee11/Ajax%EB%A1%9C-%ED%99%98%EC%9C%A8-API-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

 

주석의 중요성 ㅠㅠ 주석을 정리해놓으니 이해하기가 훨씬 쉽구나;;

 

 

숙제를 하다가 깨달았는데 나는 <style></style> 태그만 있고 script태그가 없는 것이었다. 1주차 숙제 때 제대로 보지 못해 버튼 클릭시 alert "주문이 완료되었습니다" 기능이 안 들어가 있던 것.. 그래서 그것부터 급하게 추가하였다.

<script>
    function order() {
        alert('주문이 완료되었습니다!');
    }
</script>

 

그 뒤에 

 

로딩후 바로실행 하는 코드를 넣은 후 

q1의 Ajax 기본 골격에 따라 만들었다 연습이 많이 필요할듯..

<script>
    function order() {
        alert('주문이 완료되었습니다!');
    }

    $(document).ready(function () {
        q1();
    });

    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate", //실시간 환율 API URL 입력
            data: {},                                  // GET은 data가 필요 없다.
            success: function (response) {               // 서버에서 준 결과가 response에 들어감
                let now = response['rate'];    // 변수를 먼저 지정한다
                $('#current').text(now);         // ID current로 지정된 곳에 text로 서버에서의 'rate'값이 들어감
                  }
        })
    }


</script>

 

<div class="dollar">
    <p>달러-원 환율 :<span id="current"></span></p>
</div>

즉, 실시간 환율 API 값이 success: function (response) {

let now = response['rate'] now 라는 변수로 지정 

$('#current').text(now); 제이쿼리의 ID, current로 지정된 곳에 now가 들어가게 된다.

그러면서 실시간으로 환율이 뜨게 됨 (이런 사고연습을 많이 해야겠다!!)

 

 

.dollar {
    color: blue;
}

색깔은 class로 묶어 지정해주면 끝.. 이제 css는 정말 직관적이라서 쉽게 느껴진다..