Ajax 기능 구현 - 로딩 후 호출하기 ready()HTML+CSS+JS+Flask/jQuery+Ajax2021. 6. 14. 02:53
Table of Contents
$(document).ready(function(){});
- 페이지가 로딩 되자마자 호출되는 함수이다.
- DB에 저장되어 있는 데이터를 페이지가 로딩됨과 동시에 불러올 때 용이하다!
$(document).ready(function(){
//로딩이 될 때마다 취할 행동을 적으세용
});환율을 즉각적으로 반영하는 페이지를 만들어보자!
- 페이지가 로딩되자마자 환율 api를 호출해서 화면에 자동으로 띄우는 기능을 만들어보자
- Ajax의 ready 함수를 이용해서 이를 구현할 수 있다!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 부트스트랩 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>ready 함수</title>
<!-- 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
margin: auto;
width: 900px;
}
.title {
background-color: gainsboro;
padding: 20px 30px;
}
</style>
<!-- 페이지가 로딩되자마자 호출되는 함수 -->
<script>
$('document').ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
$('.item').append(`<p style="color: blue">달러-원 환율: ${response['rate']}</p>`);
}
})
});
</script>
</head>
<body>
<div class="wrap">
<div class="title">
<h1 class="display-4">오늘의 환율은 어떻게 될까요</h1>
<hr class="my-4">
<!-- -->
<div class="item">
</div>
</div>
</div>
</body>
</html>'HTML+CSS+JS+Flask > jQuery+Ajax' 카테고리의 다른 글
| Ajax 기본 코드 탬플릿 (0) | 2021.06.27 |
|---|---|
| Ajax + jQuery 연습, 유용한 메서드 (0) | 2021.06.12 |
| 서버-클라이언트 통신 / Ajax (0) | 2021.06.12 |
| JQuery 사용해서 기능 구현 + 퀴즈 (0) | 2021.06.12 |
| JQuery (0) | 2021.06.12 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
