[Ajax] (2) 연습하기

728x90

Ajax 연습하기

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
        <li>중구 : 82</li>
        <li>종로구 : 87</li>
        <li>용산구 : 84</li>
        <li>은평구 : 82</li>
    </ul>
</div>
</body>

</html>

여기 주어진 기본 Ajax 연습 코드에서

<script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </script>

<button onclick="q1()">업데이트</button>

"q1()" 버튼을 누르면 업데이트 되는 사이트를 제작해야한다.

스크립트의 function q1() 에 Ajax 기본 골격을 넣어준다.

Ajax 기본 골격

$.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function (response) {
        console.log(response)
    }
})

<script>
    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
    }
</script>

해당 "여기에URL을입력"란에 미세먼지OpenAPI 코드스니펫 입력해주면

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
    }
</script>

짜잔~

시작할 수 있는 기본 골격이 갖춰진다.

그러고 로컬파일 URL 열기를 해주면

이런 모습의 사이트가 나오게 된다.

하지만 Ajax에 아무런 코드를 넣지 않았으니 업데이트버튼을 클릭해도 반응이 없다.

다행히 우리가 확인하기 쉽게 Console창에서는 데이터 확인이 가능하다.

콘솔창을 키고 업데이트를 누르면

이와같은 창이 나타날것이다.

해당 데이터의 세부 데이터를 눌러보면 저번 회차에서 봤듯이 RealtimeCityAir 데이터의 row 값을 가져오면 된다.

console.log(response)

콘솔에다가

['RealtimeCityAir']['row']

를 넣는다.

console.log(response['RealtimeCityAir']['row'])

그리고 해당 코드를 출력하면

콘솔창에 원하는 데이터 값이 나온다.

여기 까지는 저번 회차와 완전 동일하다.

저기서 원하는 값 (구 이름 : 미세먼지 수치) 들만 나오게 하려면

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            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']

                    console.log(gu_name, gu_mise)
                }
            }
        })
    }
</script>

이런식으로 코드를 기입한다.

그러면 콘솔창에서 해당 데이터들만 출력되는것을 확인할 수 있다.

이 값들을

여기에 출력하려면

맞다!

Temp_html을 사용해주면 된다.

<script>
    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            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}</li>`

                    $('#names-q1').append(temp_html)
                }
            }
        })
    }
</script>

이런식으로 사용해줄 수 있다.

조금 더 자세히 들여다 보면

let rows = response['RealtimeCityAir']['row']

원하는 값에 rows 라는 변수를 준다음에

for (let i = 0; i < rows.length; i++) {

i 라는 증가되어지는 숫자를 반복해주는 반복문을 만들어주고

let gu_name = rows[i]['MSRSTE_NM']

i 번째의 구 이름값을 gu_name 이라는 변수로 지정해주고

let gu_mise = rows[i]['IDEX_MVL']

i 번째의 미세먼지 수치를 gu_mise 라는 변수로 지정해준다.

let temp_html = `<li>${gu_name} : ${gu_mise}</li>`

그리고 원하는 모양의 리스트를 temp_html 이라는 변수로 지정해준다.

$('#names-q1').append(temp_html)

그 변수들을 나타나게 해주는 .append를 id="names-q1" 즉

<ul id="names-q1">
    <li>중구 : 82</li>
    <li>종로구 : 87</li>
    <li>용산구 : 84</li>
    <li>은평구 : 82</li>
</ul>

이 리스트들을 선택해주는 선택자인 "names-q1"에 출력해준다.

그렇게 하면 원하는 결과값이 사진과 같이 출력되는것을 확인할 수 있다.

여기서 추가적으로

예를 들어서 미세먼지 수치가 40이 넘어가는 구는 빨간 글씨로 출력하고 싶다면

<style type="text/css">
    div.question-box {
        margin: 10px 0 20px 0;
    }

    .bad {
        color : red;
    }
</style>

우선 스타일에서 bad 라는 임의의 묶음을 빨간 글씨로 설정해주고

<script>
    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            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 = ``

                    if (gu_mise > 40) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }

                    $('#names-q1').append(temp_html)
                }
            }
        })
    }
</script>

해당 코드를 넣어준다

이것도 자세하게 들여다 보면

let temp_html = ``

temp_html 을 `` 백틱으로 공란으로 지정해준 다음에

if (gu_mise > 40) {
    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}

미세먼지 수치가 40보다 클경우 아까 스타일에서 설정해줬던 bad라는 설정을 넣어주고

그렇지 않다면 원래대로 리스트를 넣어라로 해준다.

$('#names-q1').append(temp_html)

마지막은 같다.

이렇게 해주면

이와 같은 사이트가 출력이 되는것을 확인할 수 있다.

728x90

저작자표시

'📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 > Python' 카테고리의 다른 글

[Python] 파이썬 기초공부 (2)	2022.12.28
[Ajax] (4) Quiz_2 (0)	2022.12.27
[Ajax] (3) Quiz_1 (0)	2022.12.27
[Ajax] (1) 시작하기 (0)	2022.12.27
[JQuery] 복습하며 정리하기 (1) (0)	2022.12.26