jQuery + Ajax의 조합 연습
jQuery + Ajax 연습
문제
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
문제
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
실시간 서울시의 OpenAPI를 이용해서 모든 구의 미세먼지를 표기한다.
업데이트 버튼을 누를 때마다 새로 업데이트가 된다.
button은 onclick으로 q1() 함수로 연결된다.
먼저
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url : "주소는 비공개처리합니다.",
data : {},
success: function (response) {
let rows = (response['RealtimeCityAir']['row'])
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = `<li>${gu_name} : ${gu_mise}`
$('#names-q1').append(temp_html)
}
}
})
}
기본 ajax 구조에서 "GET" 방식으로 하고 url을 넣어준다.
rows 변수에 response['RealtimeCityAir']['row'] 값을 담아
for문으로 구 이름과 미세먼지 수치 데이터명을 뽑는다.
버튼이 클릭되고 구이름 : 미세먼지 수치가
id값인 name-q1에 추가한다.
클릭이 될 때마다 덧붙여지는 것을 방지하기 위해 맨 위에는
$('#names-q1').empty() 를 넣어준다.
일정 수치에 마킹
이렇게 서울시 구 별 미세먼지 수치에 미세먼지 수치가 60이상이면 빨간색으로 체크를 하고 싶다
어떻게 해야될까?
먼저 style에 .bad {color: red;}
로 넣어주었다.
그리고 let temp_html = <li>${gu_name} : ${gu_mise}</li>
을 넣어준 후
if (gu_mise > 60 ) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
gu_mise 가 60 이 넘으면 temp_html은 <li class="bad">${gu_name} : ${gu_mise}</li>
가 출력되고,
아니면 <li>${gu_name} : ${gu_mise}</li>
출력되게 하면 된다!
그럼 결과는?!
짜잔!~
이렇게 할 수 있다!
Author And Source
이 문제에 관하여(jQuery + Ajax의 조합 연습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suyong0697/jQuery-Ajax의-조합-연습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)