공공데이터포털에서 데이터 가져오기
보건복지부_코로나19 확진자 성별 연령별 현황
REST api서버-spring
End Point = 접속주소
JSON으로 받아오기
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<ul class="pageNation">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>받아오기</button>
<script>
//key
var key = "자신이 받은 고유키";
var pageNation = document.querySelector(".pageNation");
pageNation.addEventListener("click", function () {
if (event.target.tagName != "LI") return;
ajax(event.target.innerHTML); //데이터호출 (사용자가 클릭한 페이지번호)
})
function ajax(page) {
fetch("http://apis.data.go.kr/1360000/TourStnInfoService/getTourStnVilageFcst?ServiceKey=" + key + "&pageNo=" + page + "&numOfRows=10&dataType=JSON&CURRENT_DATE=2023010510&HOUR=24&COURSE_ID=10")
.then(function (res) {
return res.json();
}).then(function (data) {
var arr = data.response.body.items.item;
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
// console.log(arr[i].tm);
// console.log(arr[i].thema);
// console.log(arr[i].courseId);
// console.log(arr[i].courseAreaId);
// console.log(arr[i].courseAreaName);
// console.log(arr[i].courseName);
// console.log(arr[i].spotAreaId);
// console.log(arr[i].spotAreaName);
// console.log(arr[i].spotName);
// console.log(arr[i].th3);
// console.log(arr[i].wd);
// console.log(arr[i].ws);
// console.log(arr[i].sky);
// console.log(arr[i].rhm);
// console.log(arr[i].pop);
console.log("---------------------------------");
}
})
}
(function(){
ajax(1)
})();
</script>
</body>
</html>
AJAX서버와 데이터를 가져올 땐 양식을 확실히 맞춰야 한다.
고유키나, 필수로 입력하라는 '키=값'을 정확히 다 넣어줘야 한다.
'JS' 카테고리의 다른 글
| 230106 JS 인터벌 실습-타이머 만들기 (0) | 2023.01.06 |
|---|---|
| 230106 JS AJAX 서버 -yts.mx/api에서 받아오기 (0) | 2023.01.06 |
| 230106 JS AJAX json데이터와 xml데이터 (0) | 2023.01.06 |
| 230106 JS AJAX (비동기 통신) (0) | 2023.01.06 |
| 230105 JS 쿠키실습 (0) | 2023.01.05 |
