2주차는 jQuery, Ajax를 배웠다...
자바스크립트부터 슬슬 어렵고..머리가 안 굴러가서 뇌정지가 온 것 같았다.
그래서 계속 동영상 돌려보면서 복습 중인데
머리에 들어올 때까지 계속 돌려봐야 될 것 같다^^ㅎ
jQuery 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것.
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었다고 함.
jQuery는 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것!
그렇게 때문에, 쓰기 전에 "임포트"를 해야한다.
(부트스트랩에 임포트가 되어있어서. 부트스트랩을 가져다 쓸 때에는 굳이 임포트 하지 않아도 된다.)
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
css에서는 선택자로 class를,jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.
input 박스의 값 가져오기
id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
Ajax 시작하기(Ajax는 jQuery를 임포트한 페이지에서만 동작 가능)
//Ajax기본골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){){
// 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
// 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
$ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
