240312 WEB - jQuery AJAX

KDT/WEB

240312 WEB - jQuery AJAX

001cloudid 2024. 3. 12. 12:45

728x90

아이디 중복 체크

	$(function(){
		// class="dup" 버튼을 클릭했을 때
		$('.dup').click(function(){
			// class ="id" 텍스트 상자가 비어있으면 "아이디를 입력하세요." 포커스
			if($('.id').val() === ''){
				alert("아이디를 입력하세요.");
				$('.id').focus();
				return; //버튼은 기능이 없기 때문에 return만 작성해줌
			}
			// 아이디 중복체크
			$.ajax({
				//ajax 옵션
				//type : 'get' 또는 'post',
				//url : "가상주소",
				//data : {이름:값(키:값),이름:값(키:값),...},
				//dataType : 'html',
				//success : function(result){
				//	alert(result);
				//},
				//error:function(e){
				//	alert("에러");
				//}
				
				type : 'get',
				url : '${pageContext.request.contextPath}/member/idCheck',
				data : {'id' : $('.id').val()},
				dataType : 'html',
				success : function(result){
// 					alert(result);
					if(result == 'iddup'){
						result = "아이디 중복";
					} else{
						result = "아이디 사용가능";
					}
					//id = "dupdiv" => 결과값 출력
					$('#dupdiv').html(result);
				},
				error : function(e){
					alert("에러");
				}
				
			});
			
		});
	});

회원목록 가져오기

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<header>

<!-- 로그인 유무 표시값 세션에서 가져와서 => 있으면 로그인이 됨, 없으면 로그인이 되지 않음 -->

<!-- 로그인 되지 않았을 때 나타내야할 정보(login, join) -->
<c:if test="${empty sessionScope.id }">
<div id="login"><a href="${pageContext.request.contextPath}/member/login">login</a> | <a href="${pageContext.request.contextPath}/member/insert">join</a></div>
</c:if>

<!-- 로그인 되었을 때 나타나야할 정보(logout, update) -->
<c:if test="${!empty sessionScope.id }">
<div id="login">${sessionScope.id}님 | 
<a href="${pageContext.request.contextPath}/member/logout">logout</a> | 
<a href="${pageContext.request.contextPath}/member/update">update</a>
<c:if test="${sessionScope.id eq 'admin' }">
 | <a href="${pageContext.request.contextPath}/member/list">list</a>
</c:if>
</div>
</c:if>

<div class="clear"></div>
<!-- 로고들어가는 곳 -->
<div id="logo"><img src="${pageContext.request.contextPath}/resources/images/logo.gif" width="265" height="62" alt="Fun Web"></div>
<!-- 로고들어가는 곳 -->
<nav id="top_menu">
<ul>
	<li><a href="${pageContext.request.contextPath}/member/main">HOME</a></li>
	<li><a href="../company/welcome.html">COMPANY</a></li>
	<li><a href="#">SOLUTIONS</a></li>
	<li><a href="${pageContext.request.contextPath}/board/list">CUSTOMER CENTER</a></li>
	<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>

MemberController.java

	@GetMapping("/list")
	public String list() {
		System.out.println("MemberController list()");
		
		// member/list.jsp 화면으로 주소 변경 없이 이동
		return "/member/list";
	}

list.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>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
<script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<!-- include 경로 => jsp 문법 => 상대적인 웹 경로를 적용. 현 파일을 기준으로 상대적으로 경로를 표시 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>List</h1>

<div id="table_search">
<input type="button" value="회원목록" class="btn">
</div>


<table id="notice">
<tr><th class="tno">ID. </th>
<!--     <th class="ttitle">Password</th> -->
    <th class="twrite">PW</th>
    <th class="tdate">Name</th>
    <th class="tread">Date</th></tr>


</table>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>

<!-- Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 웹 개발 기법 -->
<script type="text/javascript">

	$(function(){
		// class="btn" 클릭했을 때
		$('.btn').click(function(){
// 			alert("회원목록 버튼 클릭");
			
			$.ajax({
				url : "${pageContext.request.contextPath}/member/listjson",
				dateType : "json",
				success : function(result){
					alert(result);
					}
				}
			
			});
			
		});
	});
	
</script>


</body>
</html>

AjaxController.java

	//http://localhost:8080/funweb/member/list
	@GetMapping("/member/listjson")
	public ResponseEntity<List<MemberDTO>> memberlistjson(){
		System.out.println("AjaxController memberlistjson");
		
		List<MemberDTO> memberList = memberService.getMemberList();
		
		//memberList => json 변경 프로그램 설치
		//데이터를 json형태로 변경하는 프로그램 jackson-databind
		ResponseEntity<List<MemberDTO>> entity = new ResponseEntity<List<MemberDTO>>(memberList, HttpStatus.OK);
		
		return entity;
	}

MemberService.java

	public List<MemberDTO> getMemberList() {
		System.out.println("MemberService getMemberList()");
		return memberDAO.getMemberList();
	}

MemberDAO.java

	public List<MemberDTO> getMemberList() {
		System.out.println("MemberDAO getMemberList()");
		return sqlSession.selectList(namespace+".getMemberList");
	}

memberMapper

	<select id="getMemberList" resultType="com.itwillbs.domain.MemberDTO">
		select * from members
	</select>

list.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>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
<script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<!-- include 경로 => jsp 문법 => 상대적인 웹 경로를 적용. 현 파일을 기준으로 상대적으로 경로를 표시 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>List</h1>

<div id="table_search">
<input type="button" value="회원목록" class="btn">
</div>


<table id="notice">
<tr><th class="tno">ID. </th>
<!--     <th class="ttitle">Password</th> -->
    <th class="twrite">PW</th>
    <th class="tdate">Name</th>
    <th class="tread">Date</th></tr>


</table>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>

<!-- Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 웹 개발 기법 -->
<script type="text/javascript">

	$(function(){
		// class="btn" 클릭했을 때
		$('.btn').click(function(){
// 			alert("회원목록 버튼 클릭");
			
			$.ajax({
				url : "${pageContext.request.contextPath}/member/listjson",
				dateType : "json",
				success : function(result){
// 					alert(result);
					//result 배열 => 반복
					$.each(result, function(index,item){
						//alert(index);
						//alert(item.id);
 						//id="notice" => 한 줄 내용을 뒷 부분에 추가 (append() 마지막에 추가하는 메소드)
 						$('#notice').append('<tr><td>'+item.id+'</td><td>'+ item.pw +'</td><td>'+ item.name +'</td><td>'+ item.date +'</td></tr>');
 						
					});
					
				}
			});
			
		});
	});
	
</script>


</body>
</html>

날짜 변경

<%@ 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>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
<script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<!-- include 경로 => jsp 문법 => 상대적인 웹 경로를 적용. 현 파일을 기준으로 상대적으로 경로를 표시 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>List</h1>

<div id="table_search">
<input type="button" value="회원목록" class="btn">
</div>


<table id="notice">
<tr><th class="tno">ID. </th>
<!--     <th class="ttitle">Password</th> -->
    <th class="twrite">PW</th>
    <th class="tdate">Name</th>
    <th class="tread">Date</th></tr>


</table>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>

<!-- Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 웹 개발 기법 -->
<script type="text/javascript">

	$(function(){
		// class="btn" 클릭했을 때
		$('.btn').click(function(){
// 			alert("회원목록 버튼 클릭");
			
			$.ajax({
				url : "${pageContext.request.contextPath}/member/listjson",
				dateType : "json",
				success : function(result){
// 					alert(result);
					//result 배열 => 반복
					$.each(result, function(index,item){
						//alert(index);
						//alert(item.id);
 						//id="notice" => 한 줄 내용을 뒷 부분에 추가 (append() 마지막에 추가하는 메소드)
 						var date = new Date(item.date);
						var d = date.getFullYear() +"."+ (date.getMonth()+1) +"."+ date.getDate();
 						$('#notice').append('<tr><td>'+item.id+'</td><td>'+ item.pw +'</td><td>'+ item.name +'</td><td>'+ d +'</td></tr>');
 						
					});
					
				}
			});
			
		});
	});
	
</script>


</body>
</html>

728x90

'KDT > WEB' 카테고리의 다른 글

240318 WEB - 보안 1 (0)	2024.03.18
240314 WEB - 정규표현식 (0)	2024.03.14
240311 WEB - 로그인 제어 (0)	2024.03.11
240308 WEB - 정리 2, jQuery (0)	2024.03.08
240307 WEB - 정리 1, 보안 취약점 1 (0)	2024.03.07

현재글240312 WEB - jQuery AJAX

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

001cloudid

240312 WEB - jQuery AJAX

'KDT > WEB' 카테고리의 다른 글

'KDT/WEB'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

240312 WEB - jQuery AJAX

'KDT > WEB' 카테고리의 다른 글

'KDT/WEB'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역