나의 기록_나의 다이어리

[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습1 - 서울시 미세먼지 OpenAPI 이용하여 실시간 미세먼지 표시) 본문

코딩/국비지원 개발인강 (스파르타코딩클럽)

[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습1 - 서울시 미세먼지 OpenAPI 이용하여 실시간 미세먼지 표시)

NayDiary 2022. 11. 6. 18:15
반응형
SMALL

1. Ajax 기본 골격

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

 

2. 서울시 미세먼지 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulair

 

3. Ajax 연습 (Ajax 코드 넣기 전 골격)

1) PyCharm ➡️ 파일 새로 만들기 ➡️ HTML 파일 형식 선택 ➡️ HTML 파일 새로 생성

2) 새로 만든 HTML 파일 형식에 써있던 기존 내용 다 지우기

3) 아래 형식 그대로 복사-붙여넣기

<!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>

4) 붙여넣기 한 코드 중 아래 부분에 Ajax 내용 추가 필요

    <script>
        function q1() {
            // Ajax 코드 내용 추가
            $('#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>

 

4. Ajax 연습 (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() {
            // 여기에 코드를 입력하세요
            $('#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>

</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">
        </ul>
    </div>
</body>

</html>

 

5. 미세먼지 수치가 70이상인 곳은 빨갛게 표시하기

<!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;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>

    <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 > 70) {
                            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>

</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">
        </ul>
    </div>
</body>

</html>

 

6. Ajax 구현 페이지

  • 아래와 같은 페이지로 구성
  • '업데이트' 버튼을 누르면 실시간 미세먼지 상태가 보여짐
http://spartacodingclub.shop/ajaxquiz/01
반응형
SMALL

 

반응형
LIST
저작자표시

'코딩 > 국비지원 개발인강 (스파르타코딩클럽)' 카테고리의 다른 글

[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습3 - 버튼 누를 때마다 사진과 텍스트 랜덤 표시)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습2 - 서울시 실시간 따릉이 OpenAPI 이용하여 실시간 따릉이 현황 표시)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 설명)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (서버, 클라이언트, JSON, OpenAPI, Jsonview-JSON 예쁘게 보기)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발 종합반] 1주차 정리 (Javascript - 크롬 개발자도구, 리스트, 딕셔너리, 조건문, 반복문)  (0) 2022.11.05
'코딩/국비지원 개발인강 (스파르타코딩클럽)' Related Articles more
Comments