๐Ÿ€์˜ค์›”์˜ ์ฝ”๋”ฉ์ผ์ง€

Web programming

(22.11.10)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ: AJAX ๋ฐฉ์‹์„ ์ด์šฉํ•œ ์›น ๊ตฌ์ถ•ํ”„๋กœ๊ทธ๋ž˜๋ฐ(JSON, MVC)

ํ”„๋กœ๊ทธ๋ž˜๋จธ ์˜ค์›” 2022. 11. 10.

userList.jsp ํ•˜๋‹จ์— [๋ช…๋‹จ ๋ณด๊ธฐ] ๋ฒ„ํŠผ์„ ์ƒ์„ฑํ•˜๊ณ  ๊ทธ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด alert ์— ๋ชจ๋“  ์ด์šฉ์ž์˜ ์ด๋ฆ„์ด ํ‘œ์‹œ๋˜๋„๋ก ํ•˜๋ผ

์„œ๋ฒ„์ธก์—์„œ ๋ชจ๋“  ์ด๋ฆ„์„ ๊ตฌํ•˜์—ฌ JSON๋ฐฐ์—ด ํ˜•์‹์˜ ๋ฌธ์ž์—ด๋กœ ์‘๋‹ตํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๊ทธ ๋ฌธ์ž์—ด์„ ์ˆ˜์‹ ํ•˜์—ฌ JSON.parse(str)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

java๋ฅผ ์‚ฌ์šฉํ•œ json๋ฐฐ์—ด ํ˜•์‹์˜ ๋ฌธ์ž์—ด ์ž‘์„ฑ๋ฒ•

String strArr = "[\"Smith\", \"Mary\"]"   (๋ฐธ๋ฅ˜์˜ ์—ฐ์†)

out.println(strArr)

 

json simple ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ jsonarray ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ json๋ฐฐ์—ด์˜ ํ˜•์‹์˜ ๋ฌธ์ž์—ด ์ƒ์„ฑ ๊ฐ€๋Šฅ

๋ฌธ์ž์—ด >1 json ์˜ค๋ธŒ์ ํŠธ

            >2 json ๋ฐฐ์—ด

 

 

์„œ๋ฒ„์—์„œ ํ…์ŠคํŠธ๋ฅผ ๋ณด๋‚ด์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐ์ฒด๋กœ์„œ ๋ถ€๋ฆด ์ˆ˜ ์žˆ๋‹ค.

ํ…์ŠคํŠธ๋ฅผ ๊ฐ์ฒดํ™”ํ•ด์„œ ์“ฐ๋ฉด ์ข‹์€ ์ ์€ ํ…์ŠคํŠธ ์•ˆ์— ๋งŽ์€ ํ‚ค์™€ ๋ฐธ๋ฅ˜๋“ค์„ ์ถ”์ถœํ•˜๊ธฐ ํŽธํ•˜๊ณ  ๋‹ค๋ฃจ๊ธฐ ํŽธํ•˜๋‹ค.

 

userList.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 import="com.ezen.web.hello.User"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% List<User> list = (List<User>) request.getAttribute("list"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ €์žฅ๋œ ์ด์šฉ์ž ๋ชฉ๋ก ๋ณด๊ธฐ</title>
<style type="text/css">
    table { border: 1px solid black; border-spacing:1px;
            border-collapse:collapse; padding:0.3em;}
    th{background-color:#eee; border-bottom:3px double black;}
    th,td{padding:0.2em 1em; border-right:1px dashed black;}
    td{border-bottom: 1px dashed black;}
</style>
<script type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr><th>๋ฒˆํ˜ธ</th><th>์ด๋ฆ„</th><th>์ „ํ™”</th><th>์ด๋ฉ”์ผ</th></tr>
<% 
        for(int i =0;i<list.size();i++){
        User u = list.get(i);
        int num = u.getNum();
        String name = u.getName();
        String phone = u.getPhone();
        String email = u.getEmail();
%>
        <tr>        
            <td><%=num %></td>
            <td><a href="userc?cmd=detail&num=<%=num%>"><%=name%></a></td>
            <td><%=phone %></td>
            <td><%=email %></td>
        </tr>
<%    }    %>
</table>
<form action="userc" method="post">
 <input type="hidden" name="cmd" value="findByName">
 <label>์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰</label><input type="text" name="name">
<button type="submit">[๊ฒ€์ƒ‰]</button>
<script> 
    function showList(){
        $.ajax({
            url:'userc', 
            method:'post',
            data : {"cmd":"namelist"},
            dataType: 'json',
            cache : false,
            success: function(res){
                alert(res);
            },
            err:function(xhr, status, err){
                alert(err);
            }
        });
    }
</script>
<button type="button" onclick="showList();">๋ช…๋‹จ ๋ณด๊ธฐ</button>
[<a href="userc?cmd=regForm"> ์ด์šฉ์ž ์ •๋ณด ๋“ฑ๋ก  ๊ฐ€๊ธฐ </a>]
<div><output id='out'></output></div>
</form>
</body>
</html>
 cs

 

 

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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.JSONArray;
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("namelist"))
        {
            UserService svc = new UserService(request);
            PrintWriter out =response.getWriter();
             
            out.println(svc.getNameList());
            out.flush();
        }
        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("์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.");
        }
    }
}
 cs

 

userService ํด๋ž˜์Šค

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import java.io.FileOutputStream;
import java.io.*;
import java.io.ObjectOutputStream;
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
 
import org.json.simple.JSONArray;
 
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 String getNameList()
    {   
        List<User> list = deserialize();
        JSONArray jsArr = new JSONArray();
        for(int i=0;i<list.size();i++) {
            jsArr.add(list.get(i).getName());
        }
        return jsArr.toJSONString();  
    }
    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();
    }
}
 cs

 

์‹คํ–‰ ๊ฒฐ๊ณผ:

 

 

userList.jsp์—์„œ 54์—ด์„ ์ˆ˜์ •ํ•˜์—ฌ

$('#out').val(JSON.stringify(res));

์ด๋ ‡๊ฒŒ ์‹คํ–‰ํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ฐ™์ด ๋‚˜์˜จ๋‹ค.

userList.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
<%@page import="com.ezen.web.hello.User"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% List<User> list = (List<User>) request.getAttribute("list"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ €์žฅ๋œ ์ด์šฉ์ž ๋ชฉ๋ก ๋ณด๊ธฐ</title>
<style type="text/css">
    table { border: 1px solid black; border-spacing:1px;
            border-collapse:collapse; padding:0.3em;}
    th{background-color:#eee; border-bottom:3px double black;}
    th,td{padding:0.2em 1em; border-right:1px dashed black;}
    td{border-bottom: 1px dashed black;}
</style>
<script type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr><th>๋ฒˆํ˜ธ</th><th>์ด๋ฆ„</th><th>์ „ํ™”</th><th>์ด๋ฉ”์ผ</th></tr>
<% 
        for(int i =0;i<list.size();i++){
        User u = list.get(i);
        int num = u.getNum();
        String name = u.getName();
        String phone = u.getPhone();
        String email = u.getEmail();
%>
        <tr>        
            <td><%=num %></td>
            <td><a href="userc?cmd=detail&num=<%=num%>"><%=name%></a></td>
            <td><%=phone %></td>
            <td><%=email %></td>
        </tr>
<%    }    %>
</table>
<form action="userc" method="post">
 <input type="hidden" name="cmd" value="findByName">
 <label>์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰</label><input type="text" name="name">
<button type="submit">[๊ฒ€์ƒ‰]</button>
<script> 
    function showList(){
        $.ajax({
            url:'userc', 
            method:'post',
            data : {"cmd":"namelist"},
            dataType: 'json',
            cache : false,
            success: function(res){
                //alert(res);
                //$('#out').val(JSON.stringify(res));
                //$('#out').text(JSON.stringify(res));
                $('#uid').val('MyId');
                $('#desc').text('๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค.');
            },
            err:function(xhr, status, err){
                alert(err);
            }
        });
    }
</script>
<button type="button" onclick="showList();">๋ช…๋‹จ ๋ณด๊ธฐ</button>
[<a href="userc?cmd=regForm"> ์ด์šฉ์ž ์ •๋ณด ๋“ฑ๋ก  ๊ฐ€๊ธฐ </a>]
<div id="out"></div>
<div>์•„์ด๋””<input type="text" id="uid"></div>
<div>์†Œ ๊ฐœ<span id="desc"></span></div>
</form>
</body>
</html>
 cs

 

์‹คํ–‰๊ฒฐ๊ณผ:

 

userList.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
<%@page import="com.ezen.web.hello.User"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% List<User> list = (List<User>) request.getAttribute("list"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ €์žฅ๋œ ์ด์šฉ์ž ๋ชฉ๋ก ๋ณด๊ธฐ</title>
<style type="text/css">
    table { border: 1px solid black; border-spacing:1px;
            border-collapse:collapse; padding:0.3em;}
    th{background-color:#eee; border-bottom:3px double black;}
    th,td{padding:0.2em 1em; border-right:1px dashed black;}
    td{border-bottom: 1px dashed black;}
</style>
<script type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr><th>๋ฒˆํ˜ธ</th><th>์ด๋ฆ„</th><th>์ „ํ™”</th><th>์ด๋ฉ”์ผ</th></tr>
<% 
        for(int i =0;i<list.size();i++){
        User u = list.get(i);
        int num = u.getNum();
        String name = u.getName();
        String phone = u.getPhone();
        String email = u.getEmail();
%>
        <tr>        
            <td><%=num %></td>
            <td><a href="userc?cmd=detail&num=<%=num%>"><%=name%></a></td>
            <td><%=phone %></td>
            <td><%=email %></td>
        </tr>
<%    }    %>
</table>
<form action="userc" method="post">
 <input type="hidden" name="cmd" value="findByName">
 <label>์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰</label><input type="text" name="name">
<button type="submit">[๊ฒ€์ƒ‰]</button>
<script>     function showList(){
        $.ajax({
            url:'userc', 
            method:'post',
            data : {"cmd":"namelist"},
            dataType: 'json',
            cache : false,
            success: function(res){
                //alert(res);
                $('#out').val(JSON.stringify(res));
                //$('#out').text(JSON.stringify(res));
            },
            err:function(xhr, status, err){
                alert(err);
            }        });
    }
</script>
<button type="button" onclick="showList();">๋ช…๋‹จ ๋ณด๊ธฐ</button>
[<a href="userc?cmd=regForm"> ์ด์šฉ์ž ์ •๋ณด ๋“ฑ๋ก  ๊ฐ€๊ธฐ </a>]
<div><output id='out'></output></div> //๋”ฅํƒœ๊ทธ๋Š” value๋ผ๋Š” ์†์„ฑ์ด ์—†๋‹ค.
</form>
</body>
</html>
 cs

select ํƒœ๊ทธ์˜ ๋‚ด์šฉ์ด ๋ช…๋‹จ๋ณด๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์„œ๋ฒ„์ธก์œผ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ ๋ช…๋‹จ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๊ฒŒ ํ•ด๋ณด๋ผ

userList.jsp ์˜ ํ™”๋ฉด์—์„œ ์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜๋Š” ๊ฒ€์ƒ‰์ฐฝ์— ์„œ๋ฒ„์ธก์œผ๋กœ ๋ถ€ํ„ฐ ๋ช…๋‹จ์„ ๊ตฌํ•ด์„œ ํ™”๋ฉด์ด ๋ธŒ๋ผ์šฐ์ €์— ๋กœ๋“œ๋ ๋•Œ ๊ฒ€์ƒ‰์ฐฝ์— ๋ช…๋‹จ์ด ์ œ์‹œ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•ด๋ณด๋ผ

 

userList.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
82
83
84
85
86
87
88
89
90
91
92
<%@page import="com.ezen.web.hello.User"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% List<User> list = (List<User>) request.getAttribute("list"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ €์žฅ๋œ ์ด์šฉ์ž ๋ชฉ๋ก ๋ณด๊ธฐ</title>
<style type="text/css">
    table { border: 1px solid black; border-spacing:1px;
            border-collapse:collapse; padding:0.3em;}
    th{background-color:#eee; border-bottom:3px double black;}
    th,td{padding:0.2em 1em; border-right:1px dashed black;}
    td{border-bottom: 1px dashed black;}
</style>
<script type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
    $(function(){
        showList();
    });
</script>
</head>
<body>
<table>
<tr><th>๋ฒˆํ˜ธ</th><th>์ด๋ฆ„</th><th>์ „ํ™”</th><th>์ด๋ฉ”์ผ</th></tr>
<% 
        for(int i =0;i<list.size();i++){
        User u = list.get(i);
        int num = u.getNum();
        String name = u.getName();
        String phone = u.getPhone();
        String email = u.getEmail();
%>
        <tr>        
            <td><%=num %></td>
            <td><a href="userc?cmd=detail&num=<%=num%>"><%=name%></a></td>
            <td><%=phone %></td>
            <td><%=email %></td>
        </tr>
<%    }    %>
</table>
<form action="userc" method="post">
 <input type="hidden" name="cmd" value="findByName">
 <label>์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰</label><input type="text" name="name" list= "namelist" autocomplete="off">
<button type="submit">[๊ฒ€์ƒ‰]</button>
<script> 
    function showList(){
        $.ajax({
            url:'userc', 
            method:'post',
            data : {"cmd":"namelist"},
            dataType: 'json',
            cache : false,
            success: function(res){
                var namelist = $('namelist');
                var sel = $('#sel1');
                for(var i =0;i<res.length;i++){
                    var opt = $('<option>'+ res[i] +'</option>');
                    sel.append(opt);
                }
                
            },
            err:function(xhr, status, err){
                alert(err);
            }
        });
    }
</script>
<button type="button" onclick="showList();">๋ช…๋‹จ ๋ณด๊ธฐ</button>
[<a href="userc?cmd=regForm"> ์ด์šฉ์ž ์ •๋ณด ๋“ฑ๋ก  ๊ฐ€๊ธฐ </a>]
<select id= "sel1" name="subject">
    
</select>
<input list = "subjectlist">
<datalist id="namelist">
    
</datalist>
<ol>
    <li>A</li>
    <li>B</li>
</ol>
<ul>
    <li>A</li>
    <li>B</li>
</ul>
</form>
</body>
</html>
 cs

์‹คํ–‰ ๊ฒฐ๊ณผ:

์ด์šฉ์ž์˜ ์ƒ์„ธ์ •๋ณด๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ์‚ฌ์ง„๋„ ๋‚˜์˜ค๊ฒŒ๋” ํ•ด๋ณด๋ผ

webapp์— ์ด๋ฏธ์ง€๋ฅผ ๋‹ด๋Š” ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์„œ ํ•ด๋‹น ๋””๋ ‰ํ† ๋ฆฌ์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๊ณ  ์ฝ”๋”ฉํ•ด์ค€๋‹ค.

 

 

userDetail.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
<%@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>
<div><img src="images/couple.jpg"></div>
</div>
[<a href="userc?cmd=list"> ๋“ฑ๋ก๋œ ์ด์šฉ์ž ์ •๋ณด ๋ณด๊ธฐ </a>]
[<a href="userc?cmd=edit&num=<%=u.getNum()%>"> ์ˆ˜์ • </a>]
[<a href="javascript:deleteUser(<%=u.getNum()%>);"> ์‚ญ์ œ </a>]
</body>
</html>
 cs

54์—ด์—์„œ์ฒ˜๋Ÿผ ํด๋”๋ช…๊ณผ ์ด๋ฏธ์ง€๋ช…์„ ์ ์œผ๋ฉด ๋œ๋‹ค.

 

์‹คํ–‰๊ฒฐ๊ณผ:

 

 

'Web programming' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

(22.11.15)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ: ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ, html ํƒœ๊ทธ ์‹ค์Šต  (0) 2022.11.15
(22.11.14)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ: ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ, JSP, HTML, jsp:Bean, ์˜์—ญ๊ฐ์ฒด  (0) 2022.11.14
(22.11.09)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ:AJAX๋ฐฉ์‹์„ ์ด์šฉํ•œ MVC/JSON,json-simple.jar  (2) 2022.11.09
(22.11.08)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ: AJAX, JSON, jQuery,DOM  (0) 2022.11.08
(22.11.07)Web ํ”„๋กœ๊ทธ๋ž˜๋ฐ: MVC ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉ์ž ์ฐพ๊ธฐ  (0) 2022.11.07

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”