detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
get_list()
})
function get_list() {
//ajax를 서울시 오픈 api에게 보내는데
//보내는게 성공을 하면 응답으로 돌려준 json데이터에서 저런 값들을 가져와서 rows에 넣고 그걸 출력해줘
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response["RealtimeCityAir"]["row"];
$('#gu-list').empty()
console.log(rows)
for (let i=0; i<rows.length;i++){
let gu_name = rows[i]["MSRSTE_NM"]
let gu_mise = rows[i]["IDEX_MVL"]
console.log(gu_name, gu_mise)
if (gu_mise>=200){
let html_temp =`<li>${gu_name}: ${gu_mise}</li>`
$('#gu-list').append(html_temp)
}
}
}
})
}
</script>
</head>
<body>
<h1>상세페이지</h1>
<button onclick=" window.location.href='/'">메인으로 돌아가기</button>
<ul id="gu-list">
<li>중구: 20</li>
</ul>
</body>
</html>
이 페이지를 로딩하자마자 get_list() 를 실행한다
서울시 api에서 값을 요청하는데
응답으로 돌려준 json데이터에서
response["RealtimeCityAir"]["row"]; 이 값을 rows에 담아달라
for문 안을 보면
rows만큼 돌면서
이 값들만 특별하게 gu_name과 gu_mise에 저장하고
gu_mise가 200이상이면
html_temp 에 있는 html을 출력해달라
그것을 아이디가 gu-list인 것에 붙여서 출력해라
그것은 바로 body에 저부분이다.
저 부분이 나오면 안되니까 처음에
비워준다.
728x90
'WEB > python' 카테고리의 다른 글
| [python] 크롤링으로 영화 제목 랭킹 별점 가져오기 (0) | 2021.06.10 |
|---|---|
| [python] 크롤링 기본 뼈대 (0) | 2021.06.10 |
| [jinja2] 값 끼워넣기 / ㅇㅇ아 안녕 이라고 적었을때 ㅇㅇ에 값 끼워넣기 (0) | 2021.06.09 |
| [aws] ec2 서버 오픈하기 (0) | 2021.06.08 |
| [python] 사진 업로드 되고 그것을 바로 보여주게 하는 법 (0) | 2021.06.08 |