Ajax

정보구니·2021년 9월 29일

JavaScript ajax

programing basic

목록 보기

6/12

2-8 ajax 시작하기

Ajax

✔ Ajax는 javascript의 라이브러리 중 하나이다.
✔ javascript로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법이다.
✔ type : GET / POST

📌 여기서 주의 할 점은 Ajax는 jQuery를 import한 페이지에서만 동작 가능하다 !

Ajax를 test할때는 크롬 개발자 도구에서 하면 된다.

Ajax 기본골격

$.ajax({
  type: "GET",  // GET 방식으로 요청한다.
  url: "여기에 URL을 입력",  // 요청할 URL (API 주소가 될 수 있음)
  data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){  // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response)  // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

이 골격은 외울 필요 없이 ajax라는 것이 통으로 이런식으로 생겼구나 눈으로 익히는 정도로 생각하면 된다. response라는 변수이름은 다르게 설정해도 되지만 통상적으로 response를 사용한다.

예제 (서울시 미세먼지 openAPI)

◽ ajax 기본골격 넣기

$.ajax({
  type: "GET", 
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, 
  success: function(response){ 
    console.log(response) 
  }
})

◽ for 반복문

✔ `gu_name`과 `gu_mise`값만 가져오기

이때 row라는 딕셔너리 안에 리스트가 들어있기 때문에 for 반복문을 이용한다.

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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)
    }
  }
})

// 결과
중구 37
종로구 42
용산구 39
은평구 51
서대문구 41
.
.

◽ if 조건문

✔ gu_mise가 40이하인 것만 가져오기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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'] 
        if(gu_mise < 40) {
            console.log(gu_name, gu_mise)
        }
    }
  }
})

// 결과
중구 37
용산구 39
광진구 31
영등포구 36
금천구 36
.
.

2-9 ajax 연습하기

Quiz (서울시 미세먼지)

✔ 서울시 미세먼지 OpenAPI (클릭)

◽ 모든 구의 미세먼지를 표기하기

✔ ajax 기본 골격 넣기

function q1() {           
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 response라는 변수에 담음
                  conlose.log(response)
                }
            })
        }

✔ open API에서 gu_name과 gu_mise값만 가져오기

function q1() {            
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 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']                        
                    }
                }
            })
        }

✔ temp_html 붙이기

 function q1() {            
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 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)
                    }
                }
            })
        }

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

✔ 업데이트 버튼 누를때 마다 새로고침하기

<script>
        function q1() {
            // 업데이트 버튼 누를 때마다 지웠다 새로 씌워준다.
            $('#names-q1').empty()
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 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)
                    }
                }
            })
        }

◽ 미세먼지가 70 이상인 곳을 빨간글씨로 표시하기

✔ 글자색을 빨간색으로 꾸미는 css 만들기

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

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

<script>
        function q1() {
            // 업데이트 버튼 누를 때마다 지웠다 새로 씌워준다.
            $('#names-q1').empty()
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 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 class="mise-bad">${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html)                       
                    }
                }
            })
        }
    </script>

✔ 미세먼지가 70 이상인 조건문 만들기

<script>
        function q1() {
            // 업데이트 버튼 누를 때마다 지웠다 새로 씌워준다.
            $('#names-q1').empty()
            $.ajax({
                type: "GET",  // GET 방식으로 요청한다.
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",  // 요청할 URL (API 주소가 될 수 있음)
                data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
                success: function (response) {  // 서버에서 준 결과를 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']

                        // 미세먼지가 70이상일 때만 빨간색으로 표시
                        if (gu_mise > 70) {
                            let temp_html = `<li class="mise-bad">${gu_name} : ${gu_mise}</li>`
                             $('#names-q1').append(temp_html)
                        } else {
                            let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                             $('#names-q1').append(temp_html)
                        }
                    }
                }
            })
        }
    </script>

2-11

Quiz (랜덤 고양이사진)

✔ 고양이 OpenAPI (클릭)

`jquery` : 이미지태그 `src` 바꾸기

✔ $('#id img').attr('src','이미지경로')

img 태그의 src를 변경하려면 .attr을 사용하면 된다 !

◽ 랜덤 고양이 사진 띄워주기

<script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function (response) {
            let url = response[0]['url']

            $("#img-cat").attr("src", url);
          }
        })
      }

</script>

<div>
      <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>

HW (환율 붙이기)

✔ 현재환율 API (클릭)

`js` : 페이지 로딩 후 실행

// 로딩 완료 후 바로 함수를 호출
$(document).ready(function() {
	loding()
});


funtion loding() {
	// 순차적으로 작성
}

📌 나의 코드

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>고양이 턱받이💕</title>

    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .wrap {
            width: 600px;
            margin: auto;
        }

        .thumbnail {
            background-image: url(http://image.bom.co.kr/product/detail/BOD/2102181624046456/_600.jpg);
            background-size: auto;
            background-position: center;

            width: 600px;
            height: 600px;

            margin-bottom: 30px;
        }

        .desc {
            margin-bottom: 30px;
        }

        .btn {
            margin: auto;
            display: block;
        }

        .rate {
            color: #73b4d9;
            margin-bottom: 30px;
        }
    </style>

    <script>        
        $(document).ready(function () {
            get_rate();
        })

        function get_rate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let now_rate = response['rate']

                    let temp_html =`<h5>달러-원 환율 : ${now_rate}</h5>`

                    $('#rate').append(temp_html)
                }
            })
        }

        function order() {
            alert('주문이 완료되었어요 😊')
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="thumbnail"></div>

        <div class="desc">
            <h1>💗고양이 턱받이💗 <span style="font-size:20px"> 가격 : 12000원 / 1개 </span></h1>
            <h5>흡수성이 좋고 열전도성이 높아 <p>여름에는 시원하고 겨울에는 따뜻한 귀여운 고양이 턱받이!</p></h5>
        </div>

        <div class="rate" id="rate"></div>

        <div class="order">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-name">주문자 이름</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-num">수량</span>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected> -- 수량을 선택하세요 -- </option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-address">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-phone">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <button onclick="order()" type="button" class="btn btn-danger">주문하기</button>
        </div>
    </div>
</body>

</html>

📌 모범 코드

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>고양이 턱받이💕</title>

    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .wrap {
            width: 600px;
            margin: auto;
        }

        .item-img {
            background-image: url(http://image.bom.co.kr/product/detail/BOD/2102181624046456/_600.jpg);
            background-size: auto;
            background-position: center;

            width: 600px;
            height: 600px;

            margin-bottom: 30px;
        }

        .item-desc {
            margin-bottom: 30px;
        }

        .btn {
            margin: auto;
            display: block;
        }

        .item-rate {
            color: #73b4d9;
            margin-bottom: 30px;
        }
    </style>

    <script>        
        $(document).ready(function () {
            get_rate();
        })

        function get_rate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let now_rate = response['rate']
                    $('#now-rate').text(now_rate)
                }
            })
        }

        function order() {
            alert('주문이 완료되었어요 😊')
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="item-img"></div>

        <div class="item-desc">
            <h1>💗고양이 턱받이💗 <span style="font-size:20px"> 가격 : 12000원 / 1개 </span></h1>
            <h5>흡수성이 좋고 열전도성이 높아 <p>여름에는 시원하고 겨울에는 따뜻한 귀여운 고양이 턱받이!</p></h5>
        </div>

        <div class="item-rate">
            <h5>달러-원 환율 : <span id="now-rate">1219.5</span></h5>
        </div>

        <div class="item-order">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-name">주문자 이름</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-num">수량</span>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected> -- 수량을 선택하세요 -- </option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-address">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-phone">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Default"
                       aria-describedby="inputGroup-sizing-default">
            </div>
            <button onclick="order()" type="button" class="btn btn-danger">주문하기</button>
        </div>
    </div>
</body>

</html>

정보구니

이전 포스트

서버와 클라이언트

다음 포스트

Ajax

programing basic

Ajax

Ajax 기본골격

예제 (서울시 미세먼지 openAPI)

◽ ajax 기본골격 넣기

◽ for 반복문

✔ `gu_name`과 `gu_mise`값만 가져오기

◽ if 조건문

✔ gu_mise가 40이하인 것만 가져오기

Quiz (서울시 미세먼지)

◽ 모든 구의 미세먼지를 표기하기

◽ 미세먼지가 70 이상인 곳을 빨간글씨로 표시하기

Quiz (랜덤 고양이사진)

`jquery` : 이미지태그 `src` 바꾸기

◽ 랜덤 고양이 사진 띄워주기

HW (환율 붙이기)

`js` : 페이지 로딩 후 실행

📌 나의 코드

📌 모범 코드

서버와 클라이언트

Python

0개의 댓글

관련 채용 정보

Ajax

programing basic

Ajax

Ajax 기본골격

예제 (서울시 미세먼지 openAPI)

◽ ajax 기본골격 넣기

◽ for 반복문

✔ gu_name과 gu_mise값만 가져오기

◽ if 조건문

✔ gu_mise가 40이하인 것만 가져오기

Quiz (서울시 미세먼지)

◽ 모든 구의 미세먼지를 표기하기

◽ 미세먼지가 70 이상인 곳을 빨간글씨로 표시하기

Quiz (랜덤 고양이사진)

jquery : 이미지태그 src 바꾸기

◽ 랜덤 고양이 사진 띄워주기

HW (환율 붙이기)

js : 페이지 로딩 후 실행

📌 나의 코드

📌 모범 코드

서버와 클라이언트

Python

0개의 댓글

관련 채용 정보

✔ `gu_name`과 `gu_mise`값만 가져오기

`jquery` : 이미지태그 `src` 바꾸기

`js` : 페이지 로딩 후 실행