잡동사니에도 사랑을

[21.10.20] exam04(02_xml) 본문

JAVA_EE/AJAX

[21.10.20] exam04(02_xml)

luvforjunk 2021. 10. 20. 19:06
728x90
반응형

////////exam04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	color: #333;
}

body {
	padding: 20px 30px;
}

#login fieldset {
	width: 270px;
	padding: 15px;
	border: 1px solid #7BAEB5;
	position: relative;
}

#login fieldset legend {
	display: none;
}

#login label {
	display: inline-block;
	width: 80px;
	font-size: 14px;
	font-weight: bold;
	padding-left: 10px;
	margin-bottom: 10px;
}

#login input[type='text'], #login input[type='password'] {
	border: 1px solid #ccc;
	padding: 3px 10px;
	width: 150px;
	vertical-align: middle;
	font-size: 12px;
	line-height: 150%;
}

#login input[type='submit'] {
	width: 270px;
	height: 20px;
}

.active {
	border: 1px solid #f00 !important;
	background-color: #98BF21;
}

#login {
	position: relative;
}

#login fieldset .loader {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	display: none;
}

#login .loader img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -5px;
	margin-top: -5px;
}
</style>
</head>
<body>
<form id="login">
   <fieldset>
      <legend>로그인</legend>
      <div>
         <label for="user_id">아이디</label>
         <input type="text" name="user_id" id="user_id" />
      </div>
      <div>
         <label for="user_password">비밀번호</label>
         <input type="password" name="user_password" id="user_password" />
      </div>
      <div>
         <input type="submit" value="로그인" />
      </div>
      <div class="loader">
         <img src="../img/loader.gif" />
      </div>
   </fieldset>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 포커스가 있으면 class속성 부여 / 포커스를 벗어나면 class속성 해제	
	$('#user_id, #user_password').bind({
	      'focus': function(){
	         $(this).addClass('active');
	      }, //포커스가 들어왔을 때
	      'blur': function(){
	         $(this).removeClass('active');
	      } //포커스가 나갔을 때
	   });
	
	$('#login').bind('submit', function(){
		if(!$('#user_id').val()){ // id 유효성 검사
			alert("아이디를 입력하세요.");
			$('#user_id').focus();
			return false;
		}
		
		if(!$('#user_password').val()){ // pwd 유효성 검사
			alert("비밀번호를 입력하세요.");
			$('#user_password').focus();
			return false;
		}
		
		$('#login .loader').show(); // 유효성검사 통과 후 로그인버튼 누르면 로딩아이콘 돌기
		
		$.post('../login/login.jsp',
			// {'user_id' : $('#user_id').val(),
			// 'user_password' : $('#user_password').val()
			$(this).serialize(),
			function(data){
				var result = eval($(data).find('result').text()); //문자열 -> boolean
				var message = $(data).find('message').text();
				alert(result+', ' +message);
				
				if(result){
					// 로그인 성공
				}else{
					//로그인 실패
				}
						
			}
			
		
	).fail(function(){
		alert('서버 실패'); // 서버의 주소가 틀렸을 경우
		}).always(function(){
			$('#login .loader').hide();
		});
		return false;
	});
});
</script>
</body>
</html>

<!-- 
$(this).serialize()
- 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩한다.
- 표준 URL-encoded 표기법으로 텍스트 문자열을 만든다.
- 폼 요소 집합을 표현하는 jQuery 객체를 이용한다.
  $('form').submit(
   function() {
      alert($(this).serialize());
      return false;
    }
  );
- 표준형태의 쿼리스트링을 만든다.
  => a=1&b=2&c=3&d=4
 -->

 

 

 

////////login.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %> <%-- XML파일 태그 시작 전의 공백 문자 제거--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="result" value="true" />
<c:set var="message" value="안녕하세요 홍길동님" />

<c:if test="${param.user_id != 'hong'}">
	<c:set var="result" value="false" />
	<c:set var="message" value="가입하지 않은 아이디입니다" />
</c:if>

<c:if test="${param.user_password != '111'}">
	<c:set var="result" value="false" />
	<c:set var="message" value="비밀번호가 틀렸습니다" />
</c:if>	

<?xml version="1.0" encoding="UTF-8"?>
<login>
	<result>${result }</result>
	<message>${message }</message>
</login>

<%-- 
message = "안녕하세요 홍길동님" hong, 111
message = "가입하지 않은 아이디입니다" ho, 111 
message = "비밀번호가 틀렸습니다" hong, 131
--%>

 

 

 

[결과]

 

 

 

 

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.25] exam01(03_json) - JSON 개념 정리 및 예제  (0) 2021.10.25
[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces  (0) 2021.10.21
[21.10.20] exam03(02_xml)  (0) 2021.10.20
[21.10.20] exam02(02_xml)  (0) 2021.10.20
[21.10.19] exam01(02_xml) - Ajax를 이용해 XML불러오기  (0) 2021.10.19
'JAVA_EE/AJAX' Related Articles more