API는 은행창구같은것?
GET 방식
데이터 조회를 요청하는것(목록조회)POST 방식
데이터를 생성,변경,삭제 요청하는것(회원가입, 회원탈퇴 등)Ajax 시작
서울시 미세먼지값 연습하기
<script> $.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++) //rows는 미세먼지API안에 있는값의 이름값 { let gu_name=rows[i]['MSRSTE_NM'] // 구의 이름값 let gu_mise=rows[i]['IDEX_MVL'] // 미세먼지값의 이름값 console.log(gu_name,gu_mise) } } }) </script>미세먼지값 실습
<!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; //bad라는 스타일을 하나만들어서 표시할거임 } </style> <script> function q1() { $('#names-q1').empty() //첫화면에 값을 보이지 않게하기위해 empty를쓴것 $.ajax({ type: "GET", //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){ // mise값이 40보다 크면 아까 만들어둔 스타일 bad로 나타낼것임 temp_html=`<li class="bad">${gu_name} : ${gu_mise}</li>` }else { // 40보다 작다면 그냥 나타낼것임 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>서울 따릉이 API 연습
<!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; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } </style> <script> function q1() { // 여기에 코드를 입력하세요 } </script> </head> <body> <h1>jQuery + Ajax의 조합을 연습하자!</h1> <hr /> <div class="question-box"> <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2> <p>모든 위치의 따릉이 현황을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <table> <thead> <tr> <td>거치대 위치</td> <td>거치대 수</td> <td>현재 거치된 따릉이 수</td> </tr> </thead> <tbody id="names-q1"> <tr> <td>102. 망원역 1번출구 앞</td> <td>22</td> <td>0</td> </tr> <tr> <td>103. 망원역 2번출구 앞</td> <td>16</td> <td>0</td> </tr> <tr> <td>104. 합정역 1번출구 앞</td> <td>16</td> <td>0</td> </tr> </tbody> </table> </div> </body> </html>서울 따릉이 실습
<!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; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } .bad{ color: red; //5대이하 따릉이수를 나타낼때 쓸것임 } </style> <script> function q1() { $('#names-q1').empty() $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulbike", //서울따릉이 링크 입력하고 data: {}, success: function (response) { let rows=response['getStationList']['row'] //따릉이 API 이름을 가져온후 for(let i=0; i<rows.length;i++){ //반복문으로 돌릴것 let da_name=rows[i]['stationName'] //이름 let da_loca=rows[i]['rackTotCnt'] //거치대숫자 let da_park=rows[i]['parkingBikeTotCnt'] //현재숫자 let temp_html=`` if(da_park <5){ //5개미만인것을 표현할 조건문 temp_html=`<tr class="bad"> <td>${da_name}</td> <td>${da_park}</td> <td>${da_loca}</td> </tr>` } else { temp_html=`<tr> <td>${da_name}</td> <td>${da_park}</td> <td>${da_loca}</td> </tr>` } $('#names-q1').append(temp_html) } } }) } </script> </head> <body> <h1>jQuery + Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2> <p>모든 위치의 따릉이 현황을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <table> <thead> <tr> <td>거치대 위치</td> <td>거치대 수</td> <td>현재 거치된 따릉이 수</td> </tr> </thead> <tbody id="names-q1" //띄울위치 </tbody> </table> </div> </body> </html>르탄이 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; } div.question-box > div { margin-top: 30px; } </style> <script> function q1() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/rtan", data: {}, success: function(response){ let url=response['url'] let msg=response['msg'] $('#img-rtan').attr('src',url) $('#text-rtan').text(msg) } }) } </script> </head> <body> <h1>JQuery+Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>3. 르탄이 API를 이용하기!</h2> <p>아래를 르탄이 사진으로 바꿔주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">르탄이 나와</button> <div> <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/> <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1> </div> </div> </body> </html>2주차 과제
<script> $(document).ready(function(){ $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/weather/seoul", data: {}, success: function(response){ $('#temp').text(response['temp']) } }) }); </script> </head> <body> <div class="mytitle"> <h1>지코 팬명록</h1> <p>현재기온<span id="temp">00.0</span>도</p> </div>
개발작