웹개발 종합반 2주차 - JS/JQUERY/AJAX로 API받기

Javascript / JQuery / Ajax

JQuery를 이용해 Javascript를 html로 쉽게 제어

Ajax를 이용해 서버에 데이터를 요청하고 받기

 

JQuery 추가 코드

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Javascript

- 데이터 스플릿 여러개 할때

answer.split('@')[1].split('.')[0]

JQuery

HTML 데이터를 자료형에 넣을때( ` ` 안에 넣어야함)

let temp_html = `<li>${answer}</li>`;

- 데이터 가져오기

$('#id입력').val();

- 데이터 보내기

$('#id입력').val('데이터 입력');

- 데이터를 추가하기

$('id입력').append(변수혹은 띄울 데이터 입력);

- 데이터를 비우기

$('#names-q3').empty();

 

크롬 익스텐션 JSONView 설치주소(JSON은, Key:Value로 이루어져 있습니다)

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

 

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

 

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

Ajax

기본틀

 $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                   
                }
            })

API에서 가져올때

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

// 변수 만들고, api 열어서 필요한게 뭔지 찾아서 가져와야함
// getStationList안에있는 row에서 정보를 가져오겠다 라는 뜻

이미지 변경하는 코드 (url로)

$('#img-rtan').attr('src', url)

텍스트 변경하는 코드

$('#text-rtan').text(msg)

로딩 후 호출하기

$(document).ready(function(){
	alert('다 로딩됐다!')
});

 

HTML

테이블 만드는 코드

<tr class='urgent'>
    <td>${name}</td>
    <td>${rack}</td>
    <td>${bike}</td>
</tr>