웹개발 종합반 | jQuery | Ajax

jQuery

 

· HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것 (라이브러리)

 

# jQuery import 하기

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

 

자주 사용하는 jQuery

1. Input 박스의 값 가져오기

   : $( '#id값' ).val( '내용' )  → id값에 jQuery를 적용할 것인데, 그 value를 넣고 싶다는 의미

     $( '#id값' ).val() → id값의 value를 가져오기

 

2. div 보이기 / 숨기기

   : $( '#id값' ).show() → div 보이기

     $( '#id값' ).hide() → div 숨기기

 

3. 태그 내 html 입력하기

   :  $( '#id값' ).append(변수) → 변수의 문자열을 html화 시켜준다

    ex.

 

 

---

 

Ajax

 

· jQuery를 import한 페이지에서만 동작이 가능함

 

 # Ajax 기본 골격

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

 → GET 방식으로 url에 요청해서 response를 출력하겠다는 의미!

 

 

# jQuery + Ajax 예시

   * 사용한 jQuery의 함수 

      - 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

      - 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

$.ajax({
	type: "GET",
	url: "요청할 url",
	data: {},
	success: function (response) {
		let url = response['url']
		let msg = response['msg']

		$('#imgID').attr('src', url)
		$('#textID').text(msg)
	}
})

 

 

# 추가 지식

  * 클라이언트가 서버에 데이터를 요청할 때에 "타입"이 존재함

    - GET → 통상적으로, 데이터 조회(Read)를 요청할 때

    - POST → 통상적으로, 데이터 생성(Creat), 변경(Update), 삭제(Delete) 요청할 때