Web programming

(22.11.09)Web 프로그래밍:AJAX방식을 이용한 MVC/JSON,json-simple.jar

프로그래머 오월 2022. 11. 9.

사용자 정보 추가 기능을 AJAX 요청으로 구현

사용자 정보 추가 성공시 해당 정보의 상세정보 화면으로 이동

Cache

userRegForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이용자 정보 등록</title>
<style type="text/css">
   #main {width:fit-content; margin:0 auto; }
   h3 { text-align: center; }
   form { width:fit-content; border:1px solid black; padding:1em;
      margin:0 auto; }
   label { margin-right:1em; }
   form>div { margin:0.3em; }
   button { display:block; margin:5px 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 savedUser()
    {
        //폼에 입력된 이용자 정보를 비동기전송 요청으로 전달하고 
        //응답을 현 페이지에서 바로 받아서 성공 실패 여부를 alert로 표시한다.
        //이용자가 확인을 누르면 목록 페이지로 이동한다.
        //폼에 있는 값들을 뽑아서 비동기 요청으로 전달한다.
        //#은 id 셀렉터
        /*var cmd = $('#cmd').val();
        var num = $('#num').val();
        var email = $('#email').val();*/
        var serData = $('#userRegForm').serialize();
        var num = $('#num').val();
        
        $.ajax({
            url:'userc', //url에 맞게 줘야한다.
            method:'post',// url, method, data은 서버에 대한 요청이다. 
            data: serData,
            cache : false,
 
            dataType: 'json', //text가 아닌 json으로 하면 var jsobj = JSON.parse(res); 이 코드를 할 필요가 없어져서 간소화된다.
            success: function(res){ //위에서 온 요청에대한 서버의 응답이 여기로 들어온다.
                alert(res.saved? '사용자 추가 성공':'에러'); //res에서의 saved를 넣어줘야한다.
                if(res.saved){
                    location.href = 'userc?cmd=detail&num='+num;
                }
            },
            error : function(xhr,status,err){
                //xhr : XMLHTTPRequest(비동기요청을 위한 객체)
                // status :응답 상태코드(200:정상, 500:실행오류, 400:url 요청 오류)
                alert(err);
            }
        });
    }
</script>
</head>
<body>
<div id="main">
<h3>사용자 정보 등록</h3>
<form id = 'userRegForm' action="userc" method="post">
   <input type="hidden" name="cmd" value="reg">
   <div><label>번 호</label><input id ='num'  type="text" name="num"></div>
   <div><label>이 름</label><input type="text" name="name"></div>
   <div><label>전 화</label><input type="text" name="phone"></div>
   <div><label>메 일</label><input type="text" name="email"></div>
   <div><button type="button" onclick="savedUser();">저 장</button></div> 
</form>
</div>
</body>
</html>
Colored by Color Scripter

cs

63열의 버튼이 서브미트면 폼을 제출해버리기 때문에 자바스크립트의 함수를 돌리지를 못한다. 따라서 아무 기능이 없는 버튼으로 바꿔줘야한다. 그리고 아무 기능이 없기 때문에 버튼이 클릭되었을 때 함수를 실행하라는 코드를 넣어줘야한다.

userController 클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

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();
           PrintWriter out =response.getWriter();
           String json ="{\"saved\":"+saved+"}";
           out.println(json);
           out.flush();
           //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("오류가 발생되었습니다.");
        }
    }
}
Colored by Color Scripter

cs

실행결과:

현페이지에서 사용자 추가 성공 실패 여부를 확인하기 때문에 userRegResult.jsp가 필요가 없어진다.

외부 인터넷에 있는 라이브러리를 가져와서 자바에 붙어넣기

다운 받은 파일은 해당 해키지의 WEB-INF의 lib 에 임포트해준다.

json객체 생성자를 사용하여 json map 메소드를 쉽게 쓸 수 있게 된다.

사용자 정보 삭제도 ajax 방식으로 삭제 하기

userDatail.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<%@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"></script>
<script>
    function deleteUser(num)
    {
        if(!confirm("정말로 현재 이용자 정보를 삭제하겠습니까?")) return;
            
        var obj = {"cmd":"delete","num":num};
        $.ajax({
            url:'userc', 
            method:'post',
            data: obj,
            cache : false,
            dataType: 'json',
            success:function(res){
                if(res.delete){
                    alert('이용자 정보 삭제 성공!');
                    location.href = "userc?cmd=list";    
                }else{
                    alert('사용자 정보 삭제 실패');
                }
            },
            err: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> 
<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>
Colored by Color Scripter

cs

userController class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

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;
 
import org.json.simple.JSONObject;
 
@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();
           PrintWriter out =response.getWriter();
           //String json ="{\"saved\":"+saved+"}";
          
           JSONObject jsobj = new JSONObject();
           jsobj.put("saved",saved);
           out.println(jsobj.toJSONString());
           out.flush();
           //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);
            JSONObject jsobj = new JSONObject();
            PrintWriter out =response.getWriter();
            jsobj.put("delete",delete);
            out.println(jsobj.toJSONString());
            out.flush();
            //getServletContext().getRequestDispatcher("/userDelete.jsp").forward(request, response);
        }else {
            System.err.println("오류가 발생되었습니다.");
        }
    }
}
Colored by Color Scripter

cs

실행 결과:

button의 submit 기능을 다시 써서 form을 전송하기 전에 form 데이터 유효성 검사 수행하기

userRegForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이용자 정보 등록</title>
<style type="text/css">
   #main {width:fit-content; margin:0 auto; }
   h3 { text-align: center; }
   form { width:fit-content; border:1px solid black; padding:1em;
      margin:0 auto; }
   label { margin-right:1em; }
   form>div { margin:0.3em; }
   button { display:block; margin:5px 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 savedUser()
    {
        //폼에 입력된 이용자 정보를 비동기전송 요청으로 전달하고 
        //응답을 현 페이지에서 바로 받아서 성공 실패 여부를 alert로 표시한다.
        //이용자가 확인을 누르면 목록 페이지로 이동한다.
        //폼에 있는 값들을 뽑아서 비동기 요청으로 전달한다.
        //#은 id 셀렉터
        /*var cmd = $('#cmd').val();
        var num = $('#num').val();
        var email = $('#email').val();*/
        var serData = $('#userRegForm').serialize();
        var num = $('#num').val();
        
        $.ajax({
            url:'userc', //url에 맞게 줘야한다.
            method:'post',// url, method, data은 서버에 대한 요청이다. 
            data: serData,
            cache : false,
 
            dataType: 'json', //text가 아닌 json으로 하면 var jsobj = JSON.parse(res); 이 코드를 할 필요가 없어져서 간소화된다.
            success: function(res){ //위에서 온 요청에대한 서버의 응답이 여기로 들어온다.
                alert(res.saved? '사용자 추가 성공':'에러'); //res에서의 saved를 넣어줘야한다.
                if(res.saved){
                    location.href = 'userc?cmd=detail&num='+num;
                }
            },
            error : function(xhr,status,err){
                //xhr : XMLHTTPRequest(비동기요청을 위한 객체)
                // status :응답 상태코드(200:정상, 500:실행오류, 400:url 요청 오류)
                alert(err);
            }
        });
    }
    function formCheck(){
        var num = $('input[name=num]').val();
        var name = $('input[name=name]').val();
        var phone = $('input[name=phone]').val();
        var email = $('input[name=email]').val();
        if(num==''|| name==''|| phone==''|| email==''){
            alert('모든 항목 입력은 필수입니다.');
            return false;
        }
        alert('정상적으로 입력하여 폼을 전송합니다.');
        return false;
    }
</script>
</head>
<body>
<div id="main">
<h3>사용자 정보 등록</h3>
<form id = 'userRegForm' action="userc" method="post" onsubmit="return formCheck();">
   <input type="hidden" name="cmd" value="reg">
   <div><label>번 호</label><input id ='num'  type="text" name="num"></div>
   <div><label>이 름</label><input type="text" name="name"></div>
   <div><label>전 화</label><input type="text" name="phone"></div>
   <div><label>메 일</label><input type="text" name="email"></div>
   <div><button type="submit" >저 장</button></div>
   <!-- <div><button type="button" onclick="savedUser();">저 장</button></div>  -->
</form>
</div>
</body>
</html>
 
Colored by Color Scripter

cs

실행결과:

저장 버튼을 누르면 submit이 실행되고 브랑우저 form을 보내기 전에 formCheck() 함수가 돌아간다.

이때 label에 id을 주지 않더라도 ajax의 방식으로' input[ ]' 을 써서 객체화 할 수 있다.

4가지 속성중 빈 값이 있다면 모든 항목을 다 입력하라고 alert창을 띄울 수 있게 된다.

'Web programming' 카테고리의 다른 글

(22.11.14)Web 프로그래밍: 웹프로그래밍, JSP, HTML, jsp:Bean, 영역객체 (0)	2022.11.14
(22.11.10)Web 프로그래밍: AJAX 방식을 이용한 웹 구축프로그래밍(JSON, MVC) (0)	2022.11.10
(22.11.08)Web 프로그래밍: AJAX, JSON, jQuery,DOM (0)	2022.11.08
(22.11.07)Web 프로그래밍: MVC 방식으로 사용자 찾기 (0)	2022.11.07
(22.11.04)Web 프로그래밍: 이용자 CRUD, MSC방식, 서블릿,JSP,HTML (1)	2022.11.04

(22.11.09)Web 프로그래밍:AJAX방식을 이용한 MVC/JSON,json-simple.jar

Cache

'Web programming' 카테고리의 다른 글

댓글

티스토리툴바