jQuery와 Ajax의 기본 형태 및 활용

jQuery

 

- HTML 요소들을 조작하는 JavaScript를, 편리하게 사용할 수 있게끔 미리 작성해둔 라이브러리

- 복잡한 JavaScript 코드를 간편하게, 브라우저 간 호환이 가능하게끔 구현

- 사용하기 위해 head 태그 내부에 아래와 같이 import

 

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

 

추가로 아래 사이트를 통해 jQuery CDN 코드를 참고할 수 있다.

jQuery Get Started

 

자주 쓰이는 jQuery

 

1. input box의 값 가져오기

 

$('#id_name').val();

 

 

 

2. div값 숨기기 / 보이기

// id 값 위치를 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#id_name').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#id_name').show();

 

 

3. css의 값 가져오기

$('#id_name').hide();
$('#id_name').css('css_name');

$('#id_name').show();
$('#id_name').css('css_name');

 

 

4. 태그 내 텍스트 입력하기

 

   1) input box

 

$('#id_name').val('텍스트 입력');

 

   2) button box

 

$('#button_name').text('이름 바꾸기');

 

 

 

버튼 이름이 바뀌고, input box에 텍스트가 입력되었다.

 

 

5. html 추가하기

 

let temp_html = `<button>추가된 버튼</button>;
$('id_name').append(temp_html);

 

 

 

---

Ajax

 

Ajax는 jQuery의 메소드 중 하나로, 'Asynchronous Javascipt And Xml'의 약자이다. 서버로부터 화면을 갱신하지 않고 데이터를 가져오는 비동기식 방법인데, 길게 작성해야 하는 데이터 전송 코드를 간편하게 작성할 수 있다는 장점이 있다.

 

jQuery의 메소드인 Ajax는 jQuery를 import한 화면에서만 사용이 가능하다.

 

API	사용 방식
GET	- 데이터 조회(Read) 요청 시 사용 - 데이터 전달 시 URL 뒤에 물음표를 붙여 key=value 형태로 전달
POST	- 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시 사용 - 데이터 전달 시 HTML body 부분에 key:value 형태로 전달

 

GET 방식으로 데이터를 전달할 때,

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 와 같이 물음표 뒤에 전달할 데이터를 작성하고,

& 뒤에는 추가로 전달할 데이터를 작성한다.

 

 

- Ajax 기본 골격

 

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

 

• type : "GET" -> GET 방식으로 데이터 전달
• url : 요청할 url
• data : 요청하면서 함께 줄 데이터, GET 요청 시에는 데이터 조회를 하므로 비워둠
• success : 데이터 전송 성공 시 response 값에 서버의 결과 값을 담아서 함수를 실행

 

이외에도 다양한 key값들이 존재하지만, 위 네가지의 값들이 주로 쓰이는 key값들이다.

 

 

또한 success 내에 다양한 javascript의 반복문, 조건문 등 형태의 코드를 생성하여

원하는 데이터를 html에 보여지게끔 하는 방식으로 활용할 수 있다.