● JQuery와 Ajax 시작하기
document.getElementById("element").style.display = "none"; -> $('#element').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery를 사용하는 방법
👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지만 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div 등을 가리키게 된다.Ajax 시작하기
즉, [http://google.com/] 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다.
Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
● 2주차 숙제(팬명록에 날씨정보 추가하기)
● 2주차 강의리뷰
1주차에 이어 이번에는 JQuery와 Ajax를 사용하는 법에 대해서 배울 수 있었다. 라이브러리를 이용하여 복잡했던 코드를 간단하게 작성할 수 있다는 것을 알게 되었고, 내가 원래 사용했던 코드를 간단하게 줄일 수 있다는 것이 신기했다. 숙제를 통해서 기온 데이터를 가져오게 되었는데 1주차에 이어 새로운 기능을 알게된 것 같아 더욱 흥미로워졌다.