[js] 1-2 홈페이지 들어갔을 때 로딩 되자마자 update값 표시 방법
2022. 2. 14. 17:37ㆍ개발의 흔적/웹
<script>
$(document).ready(function () { });
</script>
document는 해당 문서 즉 html을 뜻하고,
ready() 는 준비되면, 즉 로딩하면 실행하라는 의미!
위 function안에 코드를 작성하면 홈페이지 접속때마다 초기화됨!
바로 적용을 한 번 해보자!
<예시> - 남양주시 날씨이미지/기온 바로 띄우기!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.wrap{
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/namyangju",
data: {},
success: function(response){
let image = response['icon']
let temperture = response['temp']
$('#celcius').text(temperture+'도')
$('#image').attr('src', image)
}
})
});
</script>
<body>
<div class = "wrap">
<p>남양주시:</p> <p id="celcius">loading</p>
<img id="image" src="http://openweathermap.org/img/w/9d.png"></img>
</div>
</body>
</html>
'개발의 흔적 > 웹' 카테고리의 다른 글
| [js][ajax] 1.ajax의 기본 구조 & 간단한 활용 예시 (0) | 2022.02.14 |
|---|---|
| [js]1. json과 서버 (0) | 2022.02.14 |
| [js] jquery 기초 메소드 (0) | 2022.02.14 |
| [html] 기본 구성 (0) | 2022.02.12 |