잡동사니에도 사랑을

[21.10.20] exam03(02_xml) 본문

JAVA_EE/AJAX

[21.10.20] exam03(02_xml)

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

////////exam03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">아이디 중복검사</h1>
<div class="exec">
   <form>
      <input type="text" name="user_id" />
      <input type="button" id="checkId" value="중복검사" />
   </form>
</div>
<div class="console"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#checkId').click(function(){
	var user_id = $('input[name="user_id"]').val(); // user_id의 값을 가져오고
	if(!user_id) { // 값이 있으면 false고, 값이 없으면 true니까 그거의 반대(!)를 써서
		alert("아이디를 입력하세요."); // 값이 없으면 alert창이 뜨게끔
		$('input[name=user_id]').focus();
		return false;
	}
	
	$.get('../checkId/checkId.jsp',
			{'user_id' : user_id},
			function(data){ // checkId.jsp의 result값이 여기로 들어온다
				// true 또는 false 문자열로 가져온다
				var result_text = $(data).find('result').text();
			
				// 문자열을 -> boolean형으로 변환 eval
				var result = eval(result_text);
				alert(result);
				
				if(result){
					$('.console').html('<span style="color: blue;">사용할 수 없는 아이디입니다.</span>');
				}else {
					$('.console').html('<span style="color: red;">사용할 수 있는 아이디입니다.</span>');
				}
			}); 
});
</script>
</body>
</html>

<!-- 
(1) $.ajax()
    $.ajax({
      url: "XML파일의 URL",
      type: "get / post",
      data: "파라미터 문자열 key=value&key=value",
      dataType: "xml",
      success: function(data) {
         ... 통신이 성공한 경우 실행되는 함수 ...
      }      
   });
   
(2) $.get() / $.post()
    $.get("url", {파라미터 json}, function(data) {
         ... XML 데이터의 처리 ...
      }, ["xml"]);

예) 
var ajax = $.get("url", {파라미터 json}, function(data) {...XML 데이터의 처리...}, ["xml"]);

(3) ajax.fail() / ajax.always()
ajax.fail(function() {
   // 404, 500 에러 등이 발생한 경우 실행될 내용
});

ajax.always(function() {
   // 통신 성공, 실패 여부에 상관없이 무조건 마지막에 호출됨
});

 -->

 

 

 

////////checkId.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" %>    
  
<%
// String user_id = request.getParameter("user_id");
String user_id = "hong";

// DB - 나중에

boolean result = false;
if(user_id == "hong") result = true;

// xml 형식으로 보내려면
// <%@ page language="java" contentType="text/xml; charset=UTF-8"
// contentType을 text/html에서 xml로 고친다
%>
<c:set var="result" value="false" />
<c:if test="${param.user_id == 'hong' }">
	<c:set var="result" value="true" />
</c:if>
<?xml version="1.0" encoding="UTF-8"?>
<check_id>
	<result>${result }</result>
</check_id>

 

 

 

 

[결과]

아이디 미입력 시 아이디를 입력하라는 알림창이 뜬다

 

아이디에 hong 입력 시 이미 존재하고 있는 아이디이면 true라고 알림창을 띄워준다

 

이미 존재하고 있는 아이디일 경우 "사용할 수 없는 아이디입니다."라는 유효성 검사 결과값이 나온다

 

반대의 경우를 살펴보자.

존재하고 있지 않은 아이디라면 false값이 나온다

 

존재하고 있지 않은 아이디라면 "사용할 수 있는 아이디입니다"라는 유효성 검사 결과값을 띄워준다

728x90
반응형

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

[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces  (0) 2021.10.21
[21.10.20] exam04(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
[21.10.19] exam04(01_helloAjax) - JSON형식 불러오기  (0) 2021.10.19
'JAVA_EE/AJAX' Related Articles more