(22.11.08)Web 프로그래밍: AJAX, JSON, jQuery,DOM

이용자 상세보기에서 이메일 수정과 이용자 삭제 기능 넣기

 

UserController 서블릿 클래스

import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/userc")
public class UserController extends HttpServlet {
 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    {
        response.setContentType("text/html; charset=utf-8");
        request.setCharacterEncoding("utf-8");
          
        String cmd = request.getParameter("cmd");
          
        if(cmd==null ||cmd.equals("list"))
        {
           UserService svc = new UserService(request);
           List<User> list = svc.getlist();
           request.setAttribute("list", list);
           getServletContext().getRequestDispatcher("/userlist.jsp").forward(request, response);
        }
        else if(cmd.equals("regForm"))
        {
           getServletContext().getRequestDispatcher("/userRegForm.jsp").forward(request, response);
        }
        else if(cmd.equals("reg"))
        {
           UserService svc = new UserService(request);
           boolean saved = svc.save();
           request.setAttribute("saved", saved);
           getServletContext().getRequestDispatcher("/userRegResult.jsp").forward(request, response);
        }
        else if(cmd.equals("detail"))
        {
           UserService svc = new UserService(request);
           User u = svc.getUser();
           request.setAttribute("u", u);
           getServletContext().getRequestDispatcher("/userDetail.jsp").forward(request, response);
        }else if(cmd.equals("edit"))
        {
               UserService svc = new UserService(request);
               User u = svc.getUser();
               request.setAttribute("u", u);
               getServletContext().getRequestDispatcher("/userupdate.jsp").forward(request, response);
            }
        else if(cmd.equals("findByName"))
        {
           UserService svc = new UserService(request);
           List<User> list = svc.findUser();
           request.setAttribute("list", list);
           getServletContext().getRequestDispatcher("/userfind.jsp").forward(request, response);
        }else if(cmd.equals("update"))
        {
            UserService svc = new UserService(request);
            boolean update = svc.userUpdate();
            request.setAttribute("update", update);
            getServletContext().getRequestDispatcher("/updateResult.jsp").forward(request, response);
        }else if(cmd.equals("delete"))
        {
            UserService svc = new UserService(request);
            boolean delete = svc.userDelete();
            request.setAttribute("delete", delete);
            getServletContext().getRequestDispatcher("/userDelete.jsp").forward(request, response);
        }else {
            System.err.println("오류가 발생되었습니다.");
        }
    }
}

 

UserService 서비스클래스

import java.io.FileOutputStream;
import java.io.*;
import java.io.ObjectOutputStream;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
 
public class UserService 
{
    private HttpServletRequest request;
    private String fpath = "D:/java_test/user.ser";
       
    public UserService(HttpServletRequest request)
    {
       this.request = request;
    }
 
    public boolean save() 
    {
       User u = new User();
       u.setNum(Integer.parseInt(request.getParameter("num")));
       u.setName(request.getParameter("name"));
       u.setPhone(request.getParameter("phone"));
       u.setEmail(request.getParameter("email"));
          
       File f = new File(fpath);
       List<User> list = null;
          
       if(!f.exists()) list = new ArrayList<>();
       else          list = deserialize();
 
       list.add(u);
       return serialize(list);
    }
       
    private boolean serialize(List<User> list)
    {
       try {
          ObjectOutputStream objOut = new ObjectOutputStream(new FileOutputStream(fpath));
          objOut.writeObject(list);
          objOut.close();
          return true;
       } catch (Exception e) {
          e.printStackTrace();
       }
       return false;
    }
    public User getUser()
    {
       int num = Integer.parseInt(request.getParameter("num"));
       List<User> list = deserialize();
       User key = new User(num);
       if(list.contains(key)) {
           return list.get(list.indexOf(key));
       }
       return null;
    }
    public List<User> findUser()
    {
       String key = request.getParameter("name");
       List<User> list = deserialize();
       List<User> found = new ArrayList<>();
       
       for(int i=0;i<list.size();i++) {
           if(list.get(i).getName().equals(key)) {
               found.add(list.get(i));
           }
       }
       if(found.size()==0) found = null;
       return found;
    }
    public boolean userUpdate()
    {
       int num = Integer.parseInt(request.getParameter("num"));
       String email = request.getParameter("email");
       List<User> list = deserialize();
       User key = new User(num);
       if(list.contains(key)) {
           list.get(list.indexOf(key)).setEmail(email);
           serialize(list);
           return true;
       }
       return false;
    }
       public boolean userDelete()
        {
           int num = Integer.parseInt(request.getParameter("num"));
           List<User> list = deserialize();
           User key = new User(num);
           if(list.contains(key)) {
               list.remove(list.indexOf(key));
               serialize(list);
               return true;
           }
           return false;
    }
    private List<User> deserialize()
    {
       try {
          ObjectInputStream objInput = new ObjectInputStream(new FileInputStream(fpath));
          List<User> list = (List<User>)objInput.readObject();
          objInput.close();
          return list;
       } catch (Exception e) {
          e.printStackTrace();
       }
       return null;
    }
 
    public List<User> getlist() {
 
        return deserialize();
    }
}

 

userDetail.jsp

<%@page import="com.ezen.web.hello.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% User u = (User)request.getAttribute("u"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<style type="text/css">
   #container { border:1px solid black; padding:1em; 
            width:fit-content; margin:0 auto; }
   label { display:inline-block; width:5em; margin-right:1em;
         border-bottom:1px solid black; }
   h3 {width:fit-content; margin:0.5em auto; }
</style>
<script>
    function deleteUser(num)
    {
        if(confirm("정말로 현재 이용자 정보를 삭제하겠습니까?"))
            {
                location.href='userc?cmd=delete&num='+num;
            }
    }
</script>
</head>
<body>
<h3>이용자 정보 상세보기</h3>
<div id= "container">
<div><label>번호</label> <span><%= u.getNum() %></span></div>
<div><label>이름</label> <span><%= u.getName() %></span></div> 
<div><label>전화</label> <span><%= u.getPhone() %></span></div> 
<div><label>이메일</label> <span><%= u.getEmail() %></span></div>
[<a href="userc?cmd=list"> 등록된 이용자 정보 보기 </a>]
[<a href="userc?cmd=edit&num=<%=u.getNum()%>"> 수정 </a>]
[<a href="javascript:deleteUser(<%=u.getNum()%>);"> 삭제 </a>]
</div>
</body>
</html>

35열 ajax 방식이 아닌 get방식 요청

 

userupdate.jsp

<%@page import="com.ezen.web.hello.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% User u = (User)request.getAttribute("u"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이메일 수정하기</title>
<style type="text/css">
   #container { border:1px solid black; padding:1em; 
            width:fit-content; margin:0 auto; }
   label { display:inline-block; width:5em; margin-right:1em;
         border-bottom:1px solid black; }
   h3 {width:fit-content; margin:0.5em auto; }
</style>
</head>
<body>
<h3>이용자 정보 상세보기</h3>
<div id= "container">
<div><label>번호</label> <span><%= u.getNum() %></span></div>
<div><label>이름</label> <span><%= u.getName() %></span></div> 
<div><label>전화</label> <span><%= u.getPhone() %></span></div> 
<form action="userc" method="post">
<input type="hidden" name="cmd" value="update">
<input type="hidden" name="num" value="<%= u.getNum() %>">
<div><label>이메일</label> <span><input type="text" name="email" value="<%=u.getEmail()%>"></span></div>
 <button type="reset">[취소]</button>
 <button type="submit">[적용]</button>
[<a href="userc?cmd=list"> 등록된 이용자 정보 보기 </a>]
</form>
</div>
</body>
</html>

 

updateResult.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    boolean update = (Boolean) request.getAttribute("update");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이용자 정보 수정결과</title>
<script type="text/javascript">
    var msg = <%=update%> ? "정상적으로 수정했습니다" : "수정에 실패했습니다";
    alert(msg);
    location.href = "userc?cmd=list";
</script>
</head>
<body>
</body>
</html>

 

userDelete.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    boolean delete = (Boolean) request.getAttribute("delete");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이용자 정보 삭제결과</title>
<script type="text/javascript">
    var msg = <%=delete%> ? "정상적으로 삭제했습니다" : "삭제에 실패했습니다";
    alert(msg);
    location.href = "userc?cmd=list";
</script>
</head>
<body>
</body>
</html>

 

실행 결과:

상세보기에서 삭제하기

---

수정하기 

modal window

userDetail.jsp는 이용자 상세보기이기 때문에 여기서 수정과 삭제 버튼을 만들어 준다.
링크를 걸어 번호에 해당하는 사람을 고치게끔한다. 그리고 자바스크립트의 함수를 주어 이용자가 삭제를 하려고 하면 한번 더 물어보는 기능을 넣어준다. 

UserService 서비스클래스의 userUpdate()메소드를 보면 요청에서 받아온 번호와 이메일을 각각 정수 변수와 문자열 변수에 저장해준다.
정수 변수는 키 값이 되어 객체가 있는지 찾을 때 사용하고 문자열 객체는 setEmail()메소드를 사용하여 받아온 수정 이메일을 새로 리스트에 저장하고 파일을 직렬화한다.
수정이 완료 됐다면 true를 리턴해주고 이 true는 UserController 서블릿 클래스에서 받아서 updatResult.jsp로 보내준다.
받아온 값이 true면 "정상적으로 수정했습니다."출력하게하고 false면 "수정에 실패했습니다"를 출력하게 하게 삼항연산자를 사용한다.
그리고 링크를 걸어줘서 목록보기로 돌아가게해준다.

 

삭제하기도 비슷한 방식으로 하는데 삭제는 UserService 서비스클래스의 userDelete()메소드 에서 remave()메소드를 써서 삭제한다.

---

AJAX란 (Asynchronous Javascript And XML)의 약자로 비동기 자바스크립트 와 XML이란 뜻이다.

기존은 요청이 오면 응답으로 화면 전체를 갱신해야만 했다. 하지만 화면의 리프레쉬 없이 서버에서 응답 받을 걸 그 페이지에서 바로 나타낼 수 있다.

JSON (JavaScript Object Notation)"키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 

JSON 데이터 형식 : {"key": "value"} 

 

JAVASCRIPT LIBRARY 중에 널리 쓰이는 jQuery를 이용하여  AJAX 활용

DOM : Document Object Model (html 태그한개한개를 자바스크립트 객체로 다룰수 있게한다.)

 

 

userupdate.jsp

<%@page import="com.ezen.web.hello.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% User u = (User)request.getAttribute("u"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이메일 수정하기</title>
<style type="text/css">
   #container { border:1px solid black; padding:1em; 
            width:fit-content; margin:0 auto; }
   label { display:inline-block; width:5em; margin-right:1em;
         border-bottom:1px solid black; }
   h3 {width:fit-content; margin:0.5em auto; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript"> //적용을 누르면 form이 나가는게 아니라 이 함수가 돌아가게끔 해야한다.
    function updateUser()
    {
        //폼에 입력된 이용자 정보를 비동기전송 요청으로 전달하고 
        //응답을 현 페이지에서 바로 받아서 성공 실패 여부를 alert로 표시한다.
        //이용자가 확인을 누르면 목록 페이지로 이동한다.
        //폼에 있는 값들을 뽑아서 비동기 요청으로 전달한다.
        //#은 id 셀렉터
        var cmd = $('#cmd').val();
        var num = $('#num').val();
        var email = $('#email').val();
        var serData = $('#updateForm').serialize();
        
        $.ajax({
            url:'userc', //url에 맞게 줘야한다.
            method:'post',
            data: serData,
            dataType: 'text',
            success: function(res){
                var jsobj = JSON.parse(res);
                alert(jsobj.update? '수정 성공':'에러');
                if(jsobj.update){
                    location.href = 'userc?cmd=list';
                }
            },
            error : function(xhr,status,err){
                alert(err);
            }
        });
    }
</script>
</head>
<body>
<h3>이용자 정보 상세보기</h3>
<div id= "container">
<div><label>번호</label> <span><%= u.getNum() %></span></div>
<div><label>이름</label> <span><%= u.getName() %></span></div> 
<div><label>전화</label> <span><%= u.getPhone() %></span></div> 
<form id='updateForm' action="userc" method="post">
<input id='cmd' type="hidden" name="cmd" value="update">
<input id='num' type="hidden" name="num" value="<%= u.getNum() %>">
<div><label>이메일</label> <span><input id= 'email' type="text" name="email" value="<%=u.getEmail()%>"></span></div>
 <button type="reset">[취소]</button>
 <button type="button" onclick="updateUser();">[적용]</button>
[<a href="userc?cmd=list"> 등록된 이용자 정보 보기 </a>]
</form>
</div>
</body>
</html>

 

updateResult.jsp

<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
<%
    boolean update = (Boolean) request.getAttribute("update");
%>
{"update": <%=update%>}
 

 

실행결과:

요청을 ajax방식을 이용하면 결과를 변수 바로 응답 받을 수 있다.(요청한 페이지에서 바로 받는다. 화면 리프레쉬할 필요가 없어진다.)

---

컨트롤러를 수정해서  updateResult.jsp를 아예 쓰지도 않고 alert 출력도 가능하다

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/userc")
public class UserController extends HttpServlet {
 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    {
        response.setContentType("text/html; charset=utf-8");
        request.setCharacterEncoding("utf-8");
          
        String cmd = request.getParameter("cmd");
          
        if(cmd==null ||cmd.equals("list"))
        {
           UserService svc = new UserService(request);
           List<User> list = svc.getlist();
           request.setAttribute("list", list);
           getServletContext().getRequestDispatcher("/userlist.jsp").forward(request, response);
        }
        else if(cmd.equals("regForm"))
        {
           getServletContext().getRequestDispatcher("/userRegForm.jsp").forward(request, response);
        }
        else if(cmd.equals("reg"))
        {
           UserService svc = new UserService(request);
           boolean saved = svc.save();
           request.setAttribute("saved", saved);
           getServletContext().getRequestDispatcher("/userRegResult.jsp").forward(request, response);
        }
        else if(cmd.equals("detail"))
        {
           UserService svc = new UserService(request);
           User u = svc.getUser();
           request.setAttribute("u", u);
           getServletContext().getRequestDispatcher("/userDetail.jsp").forward(request, response);
        }else if(cmd.equals("edit"))
        {
               UserService svc = new UserService(request);
               User u = svc.getUser();
               request.setAttribute("u", u);
               getServletContext().getRequestDispatcher("/userupdate.jsp").forward(request, response);
            }
        else if(cmd.equals("findByName"))
        {
           UserService svc = new UserService(request);
           List<User> list = svc.findUser();
           request.setAttribute("list", list);
           getServletContext().getRequestDispatcher("/userfind.jsp").forward(request, response);
        }else if(cmd.equals("update"))
        {
            UserService svc = new UserService(request);
            boolean update = svc.userUpdate();
            PrintWriter out =response.getWriter();
            String json ="{\"update\":"+update+"}";
            out.println(json);
            out.flush();
            //  \ : 이스케이프 문자 - 원래 가진 기능에서 벗어나게 함
            //request.setAttribute("update", update);
            //getServletContext().getRequestDispatcher("/updateResult.jsp").forward(request, response);
        }else if(cmd.equals("delete"))
        {
            UserService svc = new UserService(request);
            boolean delete = svc.userDelete();
            request.setAttribute("delete", delete);
            getServletContext().getRequestDispatcher("/userDelete.jsp").forward(request, response);
        }else {
            System.err.println("오류가 발생되었습니다.");
        }
    }
}

\" : "(큰따옴표) 출력

 

 

 updateResult.jsp에서 컨트롤러에서 넘어온 boolean 값을 이용하는게 아니라 컨트롤에서 바로 boolean값을 이용한다.