전에 포스팅했던 쇼핑몰 페이지에 실시간 환율을 적용해보겠습니다.
이전 포스트 보러가기
먼저 Ajax란 javascript의 라이브러리중 하나이며 전체 페이지를 새로 고치지 않고도 페이지 일부만 데이터를 로드하여 웹페이지의 속도를 향상시킬 수 있는 기술입니다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "여기에 url을 입력",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둡니다)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
여기서 주의해야 될 점은 Ajax는 jQuery를 import한 페이지에서만 동작이 가능합니다.
jQuery는 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리 입니다. 그렇기 때문에 jQuery를 사용하기 위해서는 import를 해야 합니다.(head 태그 안에 삽입합니다.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
jQuery와 Javascript의 코드를 비교해보면
//Javascript
document.getElementById("element").style.display = "none";
//jQuery
$('#element').hide();
jQuery를 사용해서 코드를 보다 직관적으로 쓸 수 있습니다.
본격적으로 쇼핑몰 페이지에 환율 API를 적용해보겠습니다.
실시간 환율 정보를 담고있는 API를 확인합니다.
body태그 안에 작성합니다.
<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
script태그 안에 작성합니다.
<script>
//문서가 준비되면 get_rate()함수를 실행합니다.
$(document).ready(function () {
get_rate();
});
function get_rate(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
//환율 api의 rate를 받아와 now_rate로 저장합니다.
let now_rate = response['rate'];
//id가 now_rate인 곳을 now_rate로 변경합니다.
$('#now-rate').text(now_rate);
}
})
}
</script>
쇼핑몰 페이지에 실시간 환율 정보가 적용된 것을 볼 수 있습니다.
이 글은 스파르타코딩클럽의 강의를 참고로 작성하였습니다.