Archive

JQuery - Ajax API

10 Mar 2021 | JQuery

JQuery - Ajax API

  1. Ajax API

    • JQuery 라이브러리를 사용해서 간편하게 Ajax 통신을 할 수 있다
    • JQuery에서 기본적으로 Ajax 메소드를 제공하고 있는데 이 중 $.ajax() 메소드를 사용한다
    • $.ajax() : 비동기 Ajax요청을 수행, GET / POST 방식을 지정
    $.ajax({
    type: "POST", // HTTP 요청 방식, GET / POST 지정
    url: "path", // 요청을 보낼 서버의 URL 
    data: "JSON 형태의 데이터", // 요청과 함께 서버로 보낼 데이터
    success: response => {
        // 성공 시 실행할 로직 (응답 데이터를 response로 받는다)
    },
    error: (request,status,error) => {
        // 실패 시 실행할 로직
    }
    // 외에도 async, dataType, timeout, beforeSend, complete 등의 옵션이 있다
});

    $.ajax({
    type: "POST", // HTTP 요청 방식, GET / POST 지정
    url: "path", // 요청을 보낼 서버의 URL 
    data: "JSON 형태의 데이터", // 요청과 함께 서버로 보낼 데이터
})
 .done(response => {
    // 성공 시 실행할 로직 (응답 데이터를 response로 받는다)
}
 .fail(() => {
    // 실패 시 실행할 로직
})
 .always(() => {
    // 성공, 실패 여부와 상관없이 실행
});


  2. 실행 예제

    <!-- exam.html -->
   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(document).ready(() => {
		$('#b1').click(() => {
			let json = {
					"name": "limu",
					"status": true
			};
   			
			$.ajax({
				type: "POST",
				url: "process.jsp",
				data: json,
				success: data => {
					$('#result').html(data);
				}
			});
		});
	});
</script>
</head>
<body>
	<button id="b1">결과</button>
	<div id="result"></div>
</body>
</html>

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String resultStr = "처리결과: <br>";
	String name = request.getParameter("name");
	String status = request.getParameter("status");
	resultStr += "이름: "+name+"<br>";
	resultStr += "상태: "+status+"<br>";
	out.println(resultStr);
%>


  3. 실행 결과

    실행

    • 데이터를 잘 받아왔다


참고 자료

KG IT Bank 강의 자료

Related Posts