메인코드:
로딩 후 호출하기 : $(document).ready(function(){
원하는 action });
웹페이지를 로딩할 때마다 아래 기온이 업데이트됨.
완성코드
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
<title>10cm 팬명록</title>
<style>
.topline {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.khan.co.kr/article/2014/11/18/l_2014111802000889700199291.webp");
background-position: center;
background-size: cover;
height: 200px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Nanum Brush Script', cursive;
}
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function(response){
$('#temp').text(response['temp'])
}
})
});
</script>
</style>
</head>
<body>
<div class="topline">
<h1>십센치(10cm) 팬명록</h1>
<p>현재기온: <span id="temp">00</span>도</p>
</div>
</body>하면서 주의 할 부분
- 언어를 사용할때 <head>부분에 임포트 되어 있는지 확인하기
: 코드를 다 짜고 답안과 비교해 봤을때 다른점이 없는데도 계속 제대로 작동을 하지 않았다.
알고보니 jQuery를 임포트하지 않았었음. 아오 - 블럭태그인 <p>안에서 일정글자만 바꿔주고 싶을때는 <span>을 사용
<p>현재기온: <span id="temp">00</span>도</p>
'스파르타 코딩 웹개발 종합반 > 2주차' 카테고리의 다른 글
| 2-10 Quiz_Ajax 연습하기_API를 이용하여 이미지/텍스트 바꾸기 (0) | 2022.05.14 |
|---|---|
| 2-9 Quiz_Ajax 연습하기_ OpenAPI이용 (서울따릉이 현황) (0) | 2022.05.14 |
| 2-8 Ajax 연습 _ jQuery + Ajax 조합 (+ if 조건문) (0) | 2022.05.14 |
| 2-7 Ajax 시작하기 (0) | 2022.05.14 |
| 2-6 서버-클라이언트 통신 이해하기 _ JSON / JSONView /API (0) | 2022.05.14 |
