인프런 나프_2탄 12일차 : MVC07_04~06 Ajax와 JSON 데이터 처리

2021. 6. 27. 21:28

# MVC07_04 Ajax와 JSON 데이터 처리_1

버튼 클릭 시 회원 리스트 보일 수 있도록 작업

## memberList.jsp

부트스트랩 (https://www.w3schools.com/bootstrap/bootstrap_collapse.asp) > BS Collapse > Collapsible Panel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

memberList.jsp에 부트스트랩 적용 및 스크립트로 버튼 클릭 시 리스트 보여질 수 있도록 초기작업.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>    
<%@ page import="java.util.*" %>
<%
     // ArrayList<MemberVO> list=(ArrayList<MemberVO>)request.getAttribute("list");
%>    
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script type="text/javascript">

	$(document).ready(function(){
		<c:if test="${!empty msg}">
			alert("${msg}");
			<c:remove var="msg" scope="session"/>
		</c:if>
	});

	function deleteFn(num) {
		location.href="${ctx}/memberDelete.do?num="+num; // ?num=12
	}
	
	function check() {
		if ($('#user_id').val() == '') {
			alert("아이디를 입력해주세요.");
			return false;
	 	}
		
		if ($('#password').val() == '') {
			alert("비밀번호를 입력해주세요.");
			return false;
		}
		
		return true;
	}
	
	function logout() {
		location.href="<c:url value='/memberLogout.do'/>";
	}
	
	function memberList() {
		// var html = $("#collapse1 .panel-body").html();
		// alert(html);
		
		$.ajax({
			url : "<c:url value='/memberAjaxList.do'/>",	// 서버 요청
			type : "get",
			dataType : "json",
			success : resultHtml,	// 회원 리스트로 받기([{}, {}, {}])
			error : function() {error("error");}
		});
		
		
	}	
	
	function resultHtml(data) {
		var html="<table class='table table-hover'>";
		html+="<tr>";
		html+="<th>번호</th>";
		html+="<th>아이디</th>";
		html+="<th>비밀번호</th>";
		html+="<th>이름</th>";
		html+="<th>나이</th>";
		html+="<th>이메일</th>";
		html+="<th>전화번호</th>";
		html+="<th>삭제</th>";
		html+="</tr>";
		
		// 반복문 처리
		$.each(data, function(index, obj) {
			html+="<tr>";
			html+="<td>" + obj.num + "</td>";
			html+="<td>" + obj.id + "</td>";
			html+="<td>" + obj.pass + "</td>";
			html+="<td>" + obj.name + "</td>";
			html+="<td>" + obj.age + "</td>";
			html+="<td>" + obj.email + "</td>";
			html+="<td>" + obj.phone + "</td>";
			html+="<td>삭제</td>";
			html+="</tr>";
		});
		html+="</table>";
		
		$("#collapse1 .panel-body").html(html);
	}
</script>
</head>
<body>

<div class="container">
	<h2>회원관리 시스템</h2>
	<div class="panel panel-default">
		<div class="panel-heading">
		<c:if test="${sessionScope.userId == null || sessionScope.userId == ''}">
			<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
			    <div class="form-group">
					<label for="user_id">ID:</label>
					<input type="text" class="form-control" id="user_id" name="user_id">
			    </div>
			    <div class="form-group">
					<label for="pwd">Password:</label>
					<input type="password" class="form-control" id="password" name="password">
			    </div>
			    <button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
			</form>
		</c:if>
		<c:if test="${sessionScope.userId != null && sessionScope.userId != ''}">
			${sessionScope.userName}님 환영합니다.
			<button type="submit" class="btn btn-warning" onclick="logout()" >로그아웃</button>
		</c:if>	
		</div>
	<div class="panel-body">
		<div class="table-responsive">          
			<table class="table table-hover">
			<thead>
				<tr>
					<th>번호</th>
					<th>아이디</th>
					<th>비밀번호</th>
					<th>이름</th>
					<th>나이</th>
					<th>이메일</th>
					<th>전화번호</th>
					<th>삭제</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="vo" items="${list}">
				<tr>
		    	    <td>${vo.num}</td>
		    	    <td><a href="${ctx}/memberContent.do?num=${vo.num}">${vo.id}</a></td>
		    	    <td>${vo.pass}</td>
		    	    <td>${vo.name}</td>
		    	    <td>${vo.age}</td>
		    	    <td>${vo.email}</td>
		    	    <td>${vo.phone}</td>
		    	    <c:if test="${sessionScope.userId == vo.id}">
		    	    	<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})"></td>
		    	    </c:if>
		    	    <c:if test="${sessionScope.userId != vo.id}">
		    	    	<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})" disabled="disabled"></td>
		    	    </c:if>
				</tr>    	 
				</c:forEach>
				<tr>
					<td colspan="8" align="right"><input type="button" value="회원가입" class="btn btn-primary" onclick="location.href='${ctx}/memberRegister.do'"/></td>			  
				</tr>
			</tbody>
			</table>
		</div>
	</div>
	<div class="panel-footer">
		회원관리 ERP System(admin@naver.com)
	</div>
	</div>
</div>
<div class="panel-group">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" href="#collapse1" onclick="memberList()">회원 리스트 보기</a>
			</h4>
		</div>
		<div id="collapse1" class="panel-collapse collapse">
			<div class="panel-body">
	
			</div>
	    	<div class="panel-footer">Panel Footer</div>
		</div>
	</div>
</div>

</body>
</html>

# MVC07_05 Ajax와 JSON 데이터 처리_2

## Ajax 이용한 회원 리스트 불러오기 기능

1. HandlerMapping

위에서 작업한 ajax 관련 memberAjaxList.do 요청 처리위한 코드 추가.

package kr.bit.frontcontroller;

import java.util.HashMap;

import kr.bit.controller.Controller;
import kr.bit.controller.*;

public class HandlerMapping {
  private HashMap<String, Controller> mappings;
  public HandlerMapping() {
	  mappings=new HashMap<String, Controller>();
	  mappings.put("/memberList.do", new MemberListController());
	  mappings.put("/memberInsert.do", new MemberInsertController());
	  mappings.put("/memberRegister.do", new MemberRegisterController());
	  mappings.put("/memberContent.do", new MemberContentController());
	  mappings.put("/memberUpdate.do", new MemberUpdateController());
	  mappings.put("/memberDelete.do", new MemberDeleteController());
	  mappings.put("/memberLogin.do", new MemberLoginController());
	  mappings.put("/memberLogout.do", new MemberLogoutController());
	  mappings.put("/memberDbcheck.do", new MemberDbcheckController());
	  mappings.put("/memberAjaxList.do", new MemberAjaxListController());
  }
  public Controller getController(String key) { // key=>/memberList.do
	  return mappings.get(key);
  }
}

2. MemberAjaxListController 생성

프로젝트 > src > kr.bit.controller 우 클릭 > New > class 클릭 후 MemberAjaxListController 이름으로 생성
Gson API 이용 하기위해 mvnrepository 방문하여 필요한 라이브러리 다운로드 (https://mvnrepository.com/artifact/com.google.code.gson/gson), jar 파일 다운로드 후 lib 폴더에 추가.

package kr.bit.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

public class MemberAjaxListController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		MemberDAO dao = new MemberDAO();
		List<MemberVO> list = dao.memberList();
		
		// Gson API 이용 
		Gson g = new Gson();
		String json = g.toJson(list);	// [{}, {}, {}...]
		
		// $.ajax() 에 따른 json으로 응답
		response.setContentType("text/json;charset=euc-kr");
		response.getWriter().print(json);
		
		return null;
	}

}

## Ajax 이용한 회원 삭제 기능

1. memberList.jsp

memberList.jsp에 ajax로 가져온 회원리스트에서 삭제 버튼 클릭 시 삭제 기능 될 수 있도록 구현.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>    
<%@ page import="java.util.*" %>
<%
     // ArrayList<MemberVO> list=(ArrayList<MemberVO>)request.getAttribute("list");
%>    
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script type="text/javascript">

	$(document).ready(function(){
		<c:if test="${!empty msg}">
			alert("${msg}");
			<c:remove var="msg" scope="session"/>
		</c:if>
	});

	function deleteFn(num) {
		location.href="${ctx}/memberDelete.do?num="+num; // ?num=12
	}
	
	function check() {
		if ($('#user_id').val() == '') {
			alert("아이디를 입력해주세요.");
			return false;
	 	}
		
		if ($('#password').val() == '') {
			alert("비밀번호를 입력해주세요.");
			return false;
		}
		
		return true;
	}
	
	function logout() {
		location.href="<c:url value='/memberLogout.do'/>";
	}
	
	function memberList() {
		// var html = $("#collapse1 .panel-body").html();
		// alert(html);
		
		$.ajax({
			url : "<c:url value='/memberAjaxList.do'/>",	// 서버 요청
			type : "get",
			dataType : "json",
			success : resultHtml,	// 회원 리스트로 받기([{}, {}, {}])
			error : function() { error("error"); }
		});	
	}	
	
	function resultHtml(data) {
		var html="<table class='table table-hover'>";
		html+="<tr>";
		html+="<th>번호</th>";
		html+="<th>아이디</th>";
		html+="<th>비밀번호</th>";
		html+="<th>이름</th>";
		html+="<th>나이</th>";
		html+="<th>이메일</th>";
		html+="<th>전화번호</th>";
		html+="<th>삭제</th>";
		html+="</tr>";
		
		// 반복문 처리	[{}, {}, {}]
		$.each(data, function(index, obj) {
			html+="<tr>";
			html+="<td>" + obj.num + "</td>";
			html+="<td>" + obj.id + "</td>";
			html+="<td>" + obj.pass + "</td>";
			html+="<td>" + obj.name + "</td>";
			html+="<td>" + obj.age + "</td>";
			html+="<td>" + obj.email + "</td>";
			html+="<td>" + obj.phone + "</td>";
			html+="<td><input type='button' value='삭제' class='btn btn-warning' onclick='delFn(" + obj.num + ")'></td>";
			html+="</tr>";
		});
		html+="</table>";
		
		$("#collapse1 .panel-body").html(html);
	}
	
	function delFn(num) {
		$.ajax({
			url : "<c:url value='/memberAjaxDelete.do'/>",
			type : "get",
			data : {"num" : num},
			success : memberList,
			error : function() { alert("error"); }			
		});
	}
</script>
</head>
<body>

<div class="container">
	<h2>회원관리 시스템</h2>
	<div class="panel panel-default">
		<div class="panel-heading">
		<c:if test="${sessionScope.userId == null || sessionScope.userId == ''}">
			<form class="form-inline" action="${ctx}/memberLogin.do" method="post">
			    <div class="form-group">
					<label for="user_id">ID:</label>
					<input type="text" class="form-control" id="user_id" name="user_id">
			    </div>
			    <div class="form-group">
					<label for="pwd">Password:</label>
					<input type="password" class="form-control" id="password" name="password">
			    </div>
			    <button type="submit" class="btn btn-default" onclick="return check()">로그인</button>
			</form>
		</c:if>
		<c:if test="${sessionScope.userId != null && sessionScope.userId != ''}">
			${sessionScope.userName}님 환영합니다.
			<button type="submit" class="btn btn-warning" onclick="logout()" >로그아웃</button>
		</c:if>	
		</div>
	<div class="panel-body">
		<div class="table-responsive">          
			<table class="table table-hover">
			<thead>
				<tr>
					<th>번호</th>
					<th>아이디</th>
					<th>비밀번호</th>
					<th>이름</th>
					<th>나이</th>
					<th>이메일</th>
					<th>전화번호</th>
					<th>삭제</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="vo" items="${list}">
				<tr>
		    	    <td>${vo.num}</td>
		    	    <td><a href="${ctx}/memberContent.do?num=${vo.num}">${vo.id}</a></td>
		    	    <td>${vo.pass}</td>
		    	    <td>${vo.name}</td>
		    	    <td>${vo.age}</td>
		    	    <td>${vo.email}</td>
		    	    <td>${vo.phone}</td>
		    	    <c:if test="${sessionScope.userId == vo.id}">
		    	    	<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})"></td>
		    	    </c:if>
		    	    <c:if test="${sessionScope.userId != vo.id}">
		    	    	<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.num})" disabled="disabled"></td>
		    	    </c:if>
				</tr>    	 
				</c:forEach>
				<tr>
					<td colspan="8" align="right"><input type="button" value="회원가입" class="btn btn-primary" onclick="location.href='${ctx}/memberRegister.do'"/></td>			  
				</tr>
			</tbody>
			</table>
		</div>
	</div>
	<div class="panel-footer">
		회원관리 ERP System(admin@naver.com)
	</div>
	</div>
</div>
<div class="panel-group">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" href="#collapse1" onclick="memberList()">회원 리스트 보기</a>
			</h4>
		</div>
		<div id="collapse1" class="panel-collapse collapse">
			<div class="panel-body">
	
			</div>
	    	<div class="panel-footer">Panel Footer</div>
		</div>
	</div>
</div>

</body>
</html>

2. HandlerMapping

package kr.bit.frontcontroller;

import java.util.HashMap;

import kr.bit.controller.Controller;
import kr.bit.controller.*;

public class HandlerMapping {
  private HashMap<String, Controller> mappings;
  public HandlerMapping() {
	  mappings=new HashMap<String, Controller>();
	  mappings.put("/memberList.do", new MemberListController());
	  mappings.put("/memberInsert.do", new MemberInsertController());
	  mappings.put("/memberRegister.do", new MemberRegisterController());
	  mappings.put("/memberContent.do", new MemberContentController());
	  mappings.put("/memberUpdate.do", new MemberUpdateController());
	  mappings.put("/memberDelete.do", new MemberDeleteController());
	  mappings.put("/memberLogin.do", new MemberLoginController());
	  mappings.put("/memberLogout.do", new MemberLogoutController());
	  mappings.put("/memberDbcheck.do", new MemberDbcheckController());
	  mappings.put("/memberAjaxList.do", new MemberAjaxListController());
	  mappings.put("/memberAjaxDelete.do", new MemberAjaxDeleteController());
  }
  public Controller getController(String key) { // key=>/memberList.do
	  return mappings.get(key);
  }
}

3. MemberAjaxDeleteController 생성

package kr.bit.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;

public class MemberAjaxDeleteController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		int num=Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao=new MemberDAO();
		int cnt=dao.memberDelete(num);
		
		response.getWriter().print(cnt);
		
		return null;
	}

}

# MVC07_06 Ajax와 JSON

## ajax로 회원 리스트 출력 시

MemberAjaxListController에서 list에 담긴 회원리스트를 Gson 라이브러리를 이용해서 arrayList 를 json형태로 변형. 해당 데이터는 아래와 같은 형식으로 되어있다.

[{"num" : 1, "id" : aaa, "pass" : 1234}, {"num" : 2, "id" : bbb, "pass" : 1212}]

위 데이터를 ajax를 이용하여 memberList.jsp 에 가져와서 $.each (key 값 이용해서 데이터 보여줌)를 이용해서 보여준다.

저작자표시

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

인프런 나프_2탄 14일차 : MVC07_11 파일 다운로드(한글깨짐 방지) (0)	2021.06.29
인프런 나프_2탄 13일차 : MVC07_07~10 Ajax를 이용한 파일 업로드(화면 구현, Ajax를 이용한 파일 업로드, 파일업로드 DataBase에 저장, 회원리스트에 이미지 보이기 ) (0)	2021.06.28
인프런 나프_2탄 11일차 : MVC07_03 Ajax 기술 (0)	2021.06.27
인프런 나프_2탄 10일차 : MVC07_01~02 Ajax 기능을 이용한 아이디 중복체크 (0)	2021.06.27
인프런 나프_2탄 9일차 : MVC06_08 마무리 (0)	2021.06.26

New 병아리 개발자

인프런 나프_2탄 12일차 : MVC07_04~06 Ajax와 JSON 데이터 처리

# MVC07_04 Ajax와 JSON 데이터 처리_1

## memberList.jsp

# MVC07_05 Ajax와 JSON 데이터 처리_2

## Ajax 이용한 회원 리스트 불러오기 기능

1. HandlerMapping

2. MemberAjaxListController 생성

## Ajax 이용한 회원 삭제 기능

1. memberList.jsp

2. HandlerMapping

3. MemberAjaxDeleteController 생성

# MVC07_06 Ajax와 JSON

## ajax로 회원 리스트 출력 시

'인프런 강의 학습 > MVC 프레임워크_나프2탄' 카테고리의 다른 글

+ Recent posts

티스토리툴바