Ajax 실시간 업데이트하기

ajax연습 뼈대를 가져오고,
ajax 연습뼈대

업데이트를 누르면 for문이 돌면서 실시간 미세먼지 정보가 나오게 할것이다.

        function q1() {
            // 여기에 코드를 입력하세요
        }
    </script>
<button onclick="q1()">업데이트</button> 

q1()은 onclick쪽에 붙어있다.
ajax 기본 골격을 코드 입력할곳에 넣어준다.
q1을 누르면 ajax콜을 하는거다.
미세먼지API url을 입력해준다.

response가 찍혔는지 확인해보기위해 브라우저에서 업데이트 버튼 클릭.확인
RealtimeCityAir row가 잘 찍혔다.

let rows를 가져와서 response에 딕셔너리,리스트(딕셔너리)를 찍어준다.
반복문을 써준다.

🎈console로 찍어준다.

딕셔너리로 잘 찍혀나온다.
이제 이름과 수치를 찍어줄것이다.

   let gu_name=rows[i]['MSRSTE_NM']
   let gu_mise=rows[i]['IDEX_MVL']
   console.log(gu_name,gu_mise)

이름과 수치가 잘 찍혔다.

🎈이제 본문에 붙여줄 것이다.

let temp_html = ``
temp_html로 붙여주는데 어떤 html이냐
본문에 찍혀 있고 찍혀야 될 모양이

이것인데
<li>종로구 : 87</li>
복사해서 가져온다.
종로구 대신 gu_name,87 대신 gu_mise넣을것인데
내용을 바꾸고 싶을땐 ${}이 모양으로 바꾸면 된다.

🎈console로 찍고 확인.

잘 찍혔다.

🎈이제 붙여줄것인데 어디에 붙여줄 것이냐면

id가 "names-q1"를 복붙해서
$('#names-q1').append(temp_html)
이 모양으로 붙여주면

붙여졌는데 문제가 뭐냐면 업데이트를 누를때마다 그 아래에 새로 붙여진다.

🎈누를 때마다 지우고 붙여지면 더 좋겠다.

그래서 ajax콜을 하기전에
$('#names-q1').empty()를
q1()안 $.ajax전에 붙여준다.
이제 업데이트 버튼을 누르면 그 아래에 붙여지지 않고 그때마다 새로 나온다.

🎈미세먼지 수치가 85 이상인 곳에 빨갛게 보여주기

일단 전체 빨갛게 보여주는거 해보기

style안에

   .bad {
            color: red;
        } 

를 넣고
let temp_html = <li class="bad">${gu_name}:${gu_mise} </li>
그러면 브라우저에서 업데이트 버튼을 누르면 전부 빨간글씨로 찍힌다.

🎈이제 선택적으로 bad를 먹이기 위해 if문을 쓸 것이다.

우선, temp_html을 비어준다.let temp_html = ``
if문을 쓴다.85보다 크면
temp_html = `<li class="bad">${gu_name}:${gu_mise} </li>`
"bad"가 들어간 li를 넣고
else 아니면
temp_html = `<li>${gu_name}:${gu_mise} </li>`
"bad"가 안들어간 li를 넣어놓는다.