AJAX(1) 에서는 보내고 싶은 데이터를 [파라미터명: value] 으로 작성하여 하나씩 적었다면
serialize() 를 사용하여 form 태그의 모든 데이터를 넘겨줄 수 있다.
test2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('#btnOk').on('click', function() {
$.ajax({
type: "get", // 요청방식(GET or POST) 지정
url: "test2_result.jsp", // 요청 URL 지정
data: $('form').serialize(),
dataType: 'text',
success: function(response) {
$('#resultArea').html(response);
}
});
});
});
</script>
</head>
<body>
<h1>학생 정보 입력</h1>
<h1>로그인</h1>
<form action="" method="post">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" id="id" required="required" size="20"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="passwd" id="passwd" required="required" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="확인" id="btnOk">
</td>
</tr>
</table>
<div id="resultArea"><!-- AJAX 처리 결과 출력될 위치 --></div>
</form>
</body>
</html>test2.jsp에서 id와 password를 입력 후 test2_result.jsp로 id값과 password 값을 보내준다!
test2_result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- test1.jsp 페이지에서 AJAX 를 통해 요청한 작업에 대한 응답 결과를 생성하는 페이지 -->
<h1>AJAX - test2_result.jsp</h1>
<!-- test1.jsp 페이지로부터 AJAX 를 통해 전달받은 파라미터(id, passwd) 출력 -->
<!-- 전달받은 id, passwd 파라미터가 "admin", "1234" 인지 판별하여 일치할 경우 "로그인 성공", 아니면 "로그인 실패" 출력 -->
<!-- JSTL : c:choose -->
<c:choose>
<c:when test="${param.id eq 'admin' && param.passwd eq '1234'}" >
<h3>로그인 성공!</h3>
</c:when>
<c:otherwise>
<h3>로그인 실패!</h3>
</c:otherwise>
</c:choose>
</body>
</html>test2.jsp 에서 받은 id와 password를 가지고 id가 "admin"인지 password는 "1234"인지를 판별후 맞으면
"로그인 성공!" 아니면 "로그인 실패! 출력!
화면이 새로고침 되지 않고 바뀐다는게 신기하기도 하고 생각해보니 많은 부분에서 AJAX를 사용하는것 같다
잘 배워놔야겠다 ㅎㅎ
'JSP' 카테고리의 다른 글
| AJAX (4) - blur 이벤트 처리 (0) | 2022.03.09 |
|---|---|
| AJAX (3) - error 처리 (0) | 2022.03.09 |
| AJAX (1) - 사용법 (0) | 2022.03.09 |
| JQuery (on 이벤트2) (0) | 2022.03.04 |
| JQuery (on 이벤트) (0) | 2022.03.04 |
