[Week 02]ショッピングモールのホームページに為替レートAPIを適用

23058 ワード
テキストリンク
初めてAPI、AJAXを適用するのはちょっと難しいです.
(何も考えずにidではないクラスに適用したので残念な経験…)
API(アプリケーションプログラミングインターフェースアプリケーションプログラミングインターフェース、アプリケーションプログラミングインターフェース)は、コンピュータまたはコンピュータプログラム間の接続である.他のタイプのソフトウェアにサービスを提供するソフトウェアインタフェースです.
AjaxはAsynchronous JavaScriptとXMLの略です.Ajaxは、高速動的Webページを作成するための開発方法です.Ajaxは、ページ全体を再ロードすることなく、ページの一部のみをリフレッシュできます.
Ajaxベーススケルトン
$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})
<script>
        $(document).ready(function() {
                exc();
            });

        function exc() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function(response) {
                    let now_rate = response['rate'];
                    $('#exchanges').text(now_rate);
                }
        })
      }

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

<body>
    <div class ="wrap">
        <!-- Item Image -->
        <div class = "item-img"></div>

        <!-- Item Introduce -->
        <div class="item-intro">
            <h3> 무드 베어 잠옷 <span class="price"> 가격: 18,000원 / 1set </span> </h3>
            <p> 귀여운 곰돌이가 그려진 피치 기모 원단의 잠옷. 부들부들한 촉감은 잠을 잘 오게 만들어요! </p>
            <p class="rate"> 환율:  <span id="exchanges"> 0 </span> </p>
        </div>

        <!-- Order information Input -->
        <div class ="item-order">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">주문자 이름</span>
              <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
              <label class="input-group-text" for="inputGroupSelect01">Options</label>
              <select class="form-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 -- </option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>

            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">주소</span>
              <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">전화번호</span>
              <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
            </div>
        </div>

        <!-- Order Button -->
        <div class="order-button">
            <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
        </div>
    </div>
</body>

</html>
TIL. いつも韓国時間基準(JavaScript)
Objectクラスベース