728x90
반응형
<!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">
<script src="./실습2(영화정보)/js/jquery.min.js"></script>
<script>
function textBox() { //텍스트박스 클릭시 '도시입력(한글)' 사라지면서 글씨색 검정으로 변환
var textBox = document.getElementById("cityName")
textBox.setAttribute("value","")
textBox.setAttribute("style","color:black")
}
function dust() { //
var a = $('#cityName').val(); //입력된 도시 값 불러오기
console.log(a)
var dustUrl = 'https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=' +
'simqlQb4EFubzskOfXuy0ff8XrjcS%2F7DtY8TcksTWlYuymttt9CBHt5kD%2BWGm1sescnFlp6PwJV4af4DEgD58A%3D%3D&returnType=' +
'json&numOfRows=100&pageNo=1&sidoName='+a+'&ver=1.0'
console.log(dustUrl)
// XMLHttpRequest객체 생성하고 get방식 요청 설정
$.ajax({
url: dustUrl,
method:'get',
dataType:'json'
}).done(function(response){ //api로 가져온 날씨정보 response에 저장
console.log(response)
console.log(response.response.body.items.length)
var b = document.getElementById('result')
var list = "<br>"
for(var i=0; i<response.response.body.items.length; i++) {
list +=
"도시 : " + response.response.body.items[i].sidoName + "<br>" +
"구역 : " + response.response.body.items[i].stationName + "<br>" +
"시간 : " + response.response.body.items[i].dataTime + "<br>" +
"미세먼지(PM10) : " + response.response.body.items[i].pm10Value + "<br>" +
"미세먼지(PM2.5) : " + response.response.body.items[i].pm25Value + "<br><br>"
}
b.innerHTML= list
})
}
</script>
<title>미세먼지조회</title>
</head>
<body>
<input type="text" value="도시입력(한글)" style="color:grey" id="cityName" onclick="textBox()">
<button onclick="dust()">미세먼지확인</button>
<div id="result">
</div>
</body>
</html>
728x90
반응형
'HTML+CSS(실습)' 카테고리의 다른 글
| 2023-05-02(화) 미니프로젝트(Random Color Page) (0) | 2023.05.02 |
|---|---|
| ★2023-04-26(수) ToDoList(Re) (0) | 2023.04.26 |
| 2023-04-25(화) 지도api 실습 (0) | 2023.04.25 |
| 2023-04-25(화) 날씨api 실습 (0) | 2023.04.25 |
| 2023-04-25(화) 주소api 실습 (0) | 2023.04.25 |