Chapter03. Jquery의 Ajax 로 요청하기

<< 학습 목표 >>

1. Jquery의 Ajax를 사용해 요청을 보낼 수 있다.

---

앞 글(https://codingaja.tistory.com/28) 에서는 JS의 XMLHttpRequest 객체를 사용해 요청해봤음

이번에는 Jquery의 Ajax 로 요청해보자

JS 보다 Jquery를 사용해 요청하는게 더 간편함

그러나 실무에서 Jquery 를 사용하지 못하는 상황도 있으니 두 방법 다 잘 기억해둬야함

---

$.ajax({
	url: "요청할 서블릿의 경로",
	type: "요청방식",
	data: 서버로 보낼 데이터,
	dataType: 서버로 보낼 데이터 형식,
	success: function() {
		alert("서버가 처리 결과를 전달(Response) 함");
	},
	error: function(response) {
    	console.log(response);
		alert("400, 500번대 상태 코드를 전달 받음");
	}
});

JS의 XMLHttpRequest에 대해서 사용 방법이 하나로 압축되었음

흑시 XMLHttpRequest는 설정 후 실행시키기 위해서 send 메서드를 호출해야하지만 ajax 는 별도로 호출하는 메서드가 없음

저 한 덩어리의 코드로 요청 정보를 설정한 후 요청까지 보내짐

---

회원 가입 페이지를 복사한 후 복사한 페이지 내 XMLHttpRequest와 관련된 코드는 지우자

그 후 그 자리(</form> 태그와 </body> 태그 사이)에 아래 코드를 넣자

( 단, Jquery의 Ajax를 사용하는 것이므로 Jquery 를 추가해야함 / HTML, CSS, JS 관련된 기초 내용은 하지 않으므로 Jquery를 모른다면 JS의 처음부터 공부하고 오세요 )

<script>
		let submitBtn = document.querySelector("input[type=submit]");
		submitBtn.addEventListener("click", function() {
			event.preventDefault();
			
			$.ajax({
				url: "/studyProject/chapter03/join",
				type: "POST",
				data: "id=myId&pw=myPw&name=홍길동&gender=male&fav=exercise&fav=game",
				success: function() {
					alert("회원가입 완료!");
				},
				error: function(response) {
					console.log(response);
				}
			});
		});
	</script>

이제 서버를 재시작하고 브라우저를 새로고침한 후에 [ 회원가입 ] 버튼을 눌러보자

페이지 전환 없이 현재 페이지 그대로인 상태에서 [ 회원가입 완료! ] 메세지가 뜸

이와 같이 페이지 전환 없이 요청을 보낼 수 있음

 

ajax는 요청 정보를 설정하면서 데이터도 같이 설정하기 때문에 여기까지가 끝!