728x90
이전에 만들었던 원페이지 쇼핑몰 코드에 데일리 달러-원 환율의 api를 적용해보았다.
처음에는 Ajax 나 json 사용이 낯설었던 것이 사실이다. 하지만, 다양한 api로 실습을 반복하다보니 json의 리스트, 딕셔너리 형태도 익숙해지고, Ajax 활용도 익숙해졌다.
페이지 로딩 날짜에 해당하는 원화의 가격이 반영된다.
1. 페이지 로딩 하자마자 바로 나타날 수 있는 JQuery
2. 매일 바뀌는 환율 값을 불러올 수 있는 json 형태의 api 활용하는 Ajax
JQuery document.ready : 페이지 로딩 시 바로 실행
$(document).ready(function(){
함수이름 ();
});
JQuery & Ajax : 페이지 로딩 시 바로 api 적용
위의 환율 api의 값을 ajax로 받아와 페이지가 로딩되는 날짜에 맞게 환율 값이 뜨도록 구현
<script>
$(document).ready(function(){
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function(response) {
let now_rate = response['rate'];
$('#now-rate').text(now_rate);
}
})
}
</script>Ajax로 환율 api 적용해 페이지 나타내기 전체 코드
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>원페이지쇼핑몰 | 환율 표기 포함</title>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Do Hyeon', sans-serif;
}
.wrap{
width: 900px;
margin: auto;
padding-bottom: 50px;
}
.my-product{
background-image: url("/201402.jpg");
width: 800px;
height: 700px;
margin: 30px auto 30px auto;
padding-top: 15px;
}
.my-title{
font-size: 50px;
}
.price{
font-weight: bold;
font-size: 20px;
}
.my-contents{
margin-bottom: 10px;
font-size: 25px;
}
.btn{
margin: auto;
display: block;
}
.input-group {
margin: 10px auto 10px auto;
}
.now-rate,today {
color: blue;
}
</style>
<script>
$(document).ready(function(){
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function(response) {
let now_rate = response['rate'];
$('#now-rate').text(now_rate);
}
})
}
function order(){
alert('주문이 완료되었습니다!');
}
</script>
</head>
<body>
<div class="container">
<div class="my-product">
</div>
<div class="wrap">
<div class="my-contents">
<p class="my-title"> 행복을 팝니다 <span class="price">가격:1,000원/개</span></p>
행복한 순간을 담을 수 있는 곳은 우리의 머리, 가슴 그리고 또 하나, 사진이 있죠
<br> 당신의 행복한 순간을 사진에 담아 팝니다. 가격을 매길 수 없음을 알기에 저렴하게 팝니다.
<p class="rate"> 오늘 달러-원 환율: <span id="now-rate">1219.15</span></p>
</div>
<div class="user-info">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">주문자 성함</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example"
aria-describedby="btnGroupAddon2">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">수량</div>
</div>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">주소</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example"
aria-describedby="btnGroupAddon2">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">전화번호</div>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Input group example"
aria-describedby="btnGroupAddon2">
</div>
<button type="submit" onclick="order()" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>
</html>
참고 : [스파르타코딩클럽] 웹개발종합반_2주차: 원페이지 쇼핑몰에 환율 계산기 달기
728x90
'JavaScript-JQuery' 카테고리의 다른 글
| [jQuery + Javascript] 이메일 판별 함수 (특정 문자열 추출) (2) | 2022.01.25 |
|---|---|
| [jQuery + Javascript] 입력한 글자 alert 얼럿 띄우기 (0) | 2022.01.24 |
| Ajax 기본 사용 방법 & OpenAPI 이용해 실시간 값 가져오기 (0) | 2022.01.01 |
| 자바스크립트 JavaScript 함수, 변수, 자료형 (0) | 2021.12.31 |
| JQuery show() hide() - 창 보이기 숨기기 (0) | 2021.12.30 |
댓글