[Spring Boot] jQuery의 AJAX 관련 메서드로 서버와 통신하기

hameee·2023년 12월 30일

Spring Boot

목록 보기

12/20

📍 AJAX

Asynchronous JavaScript and XML

JavaScript를 사용하여 비동기적으로 서버와 통신하는 기술이다.

XML을 사용하여 데이터를 주고받는 것으로 이름이 붙었지만, 현재는 주로 JSON을 사용한다.

$.ajax()를 사용하는 방법

$.get()/$.post()를 사용하는 방법

📍 `$.ajax()`를 사용하는 방법

🚩 주의 사항

jQuery의 $.ajax() 메서드를 사용하기 위해, jQuery 원본을 import 한다.

다른 GET/POST 방식과 함께 사용해서는 안된다.(form 태그를 사용하는 경우 input/button 태그를 type="button"로 설정하거나, on의 콜백 함수에서 e.preventDefault()를 사용한다.)

$.ajax() 메서드의 전달인자로 객체를 전달하며, 객체 내부에 request(type, url, data)와 response(success, error, complete) 관련 요소들을 작성한다.

request 관련 요소

type: 요청 방식

url: 요청 주소

data: 서버로 전송할 데이터. JSON으로 작성한다.

response 관련 요소

success: 성공 시 실행되는 함수. data를 매개변수로 받는다.

error: 실패 시 실행되는 함수. request, status, error를 매개변수로 받는다.

complete: 요청 완료 시 성공 또는 실패 여부와 관계없이 실행되는 함수. data를 매개변수로 받는다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<!-- AJAX를 사용하려면 jQuery 원본 필요 -->
<script src="https://code.jquery.com/jquery-3.7.1.js"
	integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
	crossorigin="anonymous"></script>
</head>
<body>
	<input type="button" value="회원가입">
	<script>
		$(document).ready(function() {
			$("input").on("click", function() {
				$.ajax({
					// request
					type: "POST"
					, url: "/add-user"
					, data: {"name":"홍길동", "email":"hong@gmail.com"}
					
					// response
					, success: function(data) {
						alert("성공 시 실행");
					}
					, error: function(request, status, error) {
						alert("실패 시 실행");
					}
					, complete: function(data) {
						alert("항상 실행");
					}
				});
			});
		});
	</script>
</body>
</html>

📍 `$.get()/$.post()`를 사용하는 방법

🚩 주의 사항

jQuery의 $.get()/$.post() 메서드를 사용하기 위해, jQuery 원본을 import 한다.

다른 GET/POST 방식과 함께 사용해서는 안된다.(form 태그를 사용하는 경우 input/button 태그를 type="button"로 설정하거나, on의 콜백 함수에서 e.preventDefault()를 사용한다.)

$.get()/$.post()의 전달인자로 url과 params를 전달하며, .done()에 성공 시 실행할 콜백 함수를 정의한다.

form 태그를 사용하는 경우, url은 $(폼 태그).attr("action")으로, params는 $(폼 태그).serialize()로 가져올 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<!-- AJAX를 사용하려면 jQuery 원본 필요 -->
<script src="https://code.jquery.com/jquery-3.7.1.js"
	integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
	crossorigin="anonymous"></script>
</head>
<body>
	<input type="button" value="회원가입">
	<script>
		$(document).ready(function() {
			$("input").on("click", function() {
				$.post("/add-user", {"name":"홍길동", "email":"hong@gmail.com"})
                .done(function(data) {
                	alert("성공 시 실행");
                });
			});
		});
	</script>
</body>
</html>