스파르타 TIL 02. JQuery와 Ajax

JQuery 와 Ajax

 

CSS의 부트스트랩처럼 Javascript의 JQuery를 활용하자.

1. JQuery

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라

미리 작성된 Javascript 코드다.

전문 개발자들이 짜둔 코드를 잘 가져와서 사용해보자 !

(그렇게 때문에, 쓰기 전에 "임포트"를 해야한다.)

 

//자바스크립트로 이렇게 길게 써야하는 것들을
document.getElementById("element").style.display = "none";

//jQuery로 보다 직관적으로 쓸 수 있다.
$('#element').hide();

 

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" 조작할 수 있다.

 

예) 특정 인풋박스의 값을 → 가져와줘!

예) 특정 div를 → 안보이게 해줘!

 

css에서는 선택자로 class를 썼듯이,  jQuery에서는 id 값을 통해

특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

 

JQuery도 다 외우는 것이 아니라

필요할 때 구글링해서 찾아 쓰면 된다.

 

// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다. ex)${title}
let temp_html = `<button>${title}</button>`;
$('#cards-box').append(temp_html);

 

2. Ajax

숙제로 제출한 페이지에 ajax를 이용해 서버로부터

데이터를 주고 받는 연습을 해 보았다.

 

Ajax는 Ajax는 빠르게 동작하는

동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.

Ajax는 JQuery를 임포트한 페이지에서만 작동한다.

 

//Ajax의 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

 

//- $ajax 코드 설명
//    - type: "GET" → GET 방식으로 요청한다.
//    - url: 요청할 url
//    - data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

//GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
//http://naver.com?param=value&param2=value2 

//POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
//data: { param: 'value', param2: 'value2' },

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}

 

ajax를 이용해서 공공api를 활용해

더 다양한 정보들을 다룬 동적인 홈페이지를 만들 수 있다.