[Week 02] 나만의 쇼핑몰 메인 페이지에 환율API 적용하기
API, AJAX적용을 처음 해보아서 조금 어려움을 겪었다.
(아무 생각없이 id가 아닌 class로 적용을 해버려서 안됐던 경험을....)
API(application programming interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다.
Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 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>Author And Source
이 문제에 관하여([Week 02] 나만의 쇼핑몰 메인 페이지에 환율API 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wendyshme/Week-02-나만의-쇼핑몰-메인-페이지에-환율API-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
