[웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(3)

※ 개요

요구사항 6) AJAX 기능을 이용하여 Add 기능 수정

요구사항 7) AJAX 기능을 이용하여 Update 기능 수정

---

요구사항 6) AJAX 기능을 이용하여 Add 기능 수정

AJAX 기능을 이용해, 페이지를 불러오지 않고 알림창만 생기게 한 뒤, 바로 결과를 출력하게 수정

 

[이전 과정에서 Add를 수행할 경우]

1. Button의 type = "submit"을 사용해 MemSvc.java로 데이터(Request)를 전송한다.

2. 조건문을 통해 cmd에 맞는 Add를 수행한다.

3. 수행한 결과(path명, MemList.jsp 파일 경로)를 서블릿에게 알려준다.

4. 서블릿의 forward를 사용해 request와 response를 해당 Path로 전달한다.

 

[변경할 과정]

1. Button의 type = "submit"을 사용해 MemSvc.java로 데이터(Request)를 전송한다.

=> AJAX를 이용해 보낼 url, method, data, 넘길 Object를 정의한다.(넘길 Object == 서블릿으로 보낼 request)

2. 조건문을 통해 cmd에 맞는 Add를 수행한다.

3. 수행한 결과를, MemList.jsp 파일 경로를 서블릿에게 전송한다.

=> Alert를 위해 JSON 객체를 생성하고 속성을 지정하는 Jsp 파일 경로를 서블릿에게 알려준다.

4. 서블릿의 forward를 사용해 request와 response를 전달한다(이 때, request 안에는 추가가 성공했는지의 여부를 True, False로 값이 들어있다.

5. (추가) AJAX에서 success 함수를 통해 alert를 출력하고 성공했을 경우 href를 이용해 멤버 리스트를 출력할 URL로 이동하여 리스트를 출력한다.

 

* MemberAdd.jsp

- body의 form의 button 속성을 변경한다.

<button type = "button" id = "savebtn">저장</button>

- script 내용으로 AJAX 내용을 추가한다.

<script>
	
	$(function(){
		$('#savebtn').click(function(){
			var jsObj = {};
			jsObj.cmd = $('#cmd').val();
			jsObj.name = $('#name').val();
			jsObj.phone = $('#phone').val();
			jsObj.email = $('#email').val();

			// 파라미터를 서버로 전송하고 응답을 수신한다.
			$.ajax({
				// 데이터 송신 정의
				// url: url에 연결된 프로그램에게 송신(꼭 jsp가 아닐 수 있다.)
				url:'/MyWeb/mem',
				method: 'post',
				data: jsObj,
				
				// 데이터 수신 정의
				dataType: 'json',
				// 요청이 성공할 때 실행되는 함수
				// function(res)의 Argument res는 jsp에서 보낸 응답이다.
				success: function(res){
					if(res.result){
						alert('추가 성공');
						location.href = "/MyWeb/mem?cmd=list";
					}
					else{
						alert('추가 실패');
					}
				},
				// 요청이 실패할 때 실행되는 함수
				error: function(xhr, textStatus, errorThrown){
					alert(textStatus + ': '+errorThrown);
				}
			})
		});
	});
	
	</script>

 

* MemSvc.java

- cmd.equals("add") return url 변경

else if(cmd.equals("add")) {
			String name = request.getParameter("name");
			String phone = request.getParameter("phone");
			String email = request.getParameter("email");
			MemVO newMem = new MemVO();
			newMem.setName(name);
			newMem.setPhone(phone);
			newMem.setEmail(email);
			
			new MemDAO().insert(newMem);
			request.setAttribute("memlist", getList());
			request.setAttribute("result", true);
            // return 변경
			return "/MemResult.jsp";
		}
		
		return null;

 

* MemResult.jsp 생성

- AJAX로 JSON 객체를 정의하고 보낼 jsp 파일을 생성

<%@page import="org.json.simple.JSONObject"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
<%
	JSONObject jsObj = new JSONObject();
	jsObj.put("result", (boolean)request.getAttribute("result"));
	out.write(jsObj.toJSONString());
	out.flush();
%>

CSS 스타일도 변경

깔끔해졌다.

---

요구사항 7) AJAX 기능을 이용하여 Update 기능 수정(위와 같음)

* MemberEdit.jsp

<button type = "button" id = "savebtn">완료</button>

<script>
		$(function(){
			$('#savebtn').click(function(){
				var jsObj = {};
				jsObj.cmd = $('#cmd').val();
				jsObj.num = $('#num').val();
				jsObj.email = $('#email').val();

				// 파라미터를 서버로 전송하고 응답을 수신한다.
				$.ajax({
					// 데이터 송신 정의
					// url: url에 연결된 프로그램에게 송신(꼭 jsp가 아닐 수 있다.)
					url:'/MyWeb/mem',
					method: 'post',
					data: jsObj,
					
					// 데이터 수신 정의
					dataType: 'json',
					// 요청이 성공할 때 실행되는 함수
					// function(res)의 Argument res는 jsp에서 보낸 응답이다.
					success: function(res){
						if(res.result){
							alert('업데이트 성공');
							location.href = "/MyWeb/mem?cmd=list";
						}
						else{
							alert('업데이트 실패');
						}
					},
					// 요청이 실패할 때 실행되는 함수
					error: function(xhr, textStatus, errorThrown){
						alert(textStatus + ': '+errorThrown);
					}
				})
			});
		});
		
		</script>
		

 

* MemSvc.java

else if(cmd.equals("update")) {
			boolean flag = new MemDAO().update(Integer.parseInt(request.getParameter("num")), request.getParameter("email"));
			request.setAttribute("memlist", getList());
			request.setAttribute("result", flag);
			return "/MemResult.jsp";
		}