본문 바로가기
HTML│CSS│Java Script

Ajax 로 DB에 접근하기 1

by 자유코딩 2018. 7. 21.

members.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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    span{width: 150px; color: red;}
    input{border: 1px solid red;}
    table{width: 100% ;}
    table th,td{border: 1px solid gray; text-align: center;}
    h2 { text-align: center}
    
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        function getList() {
            $.ajax({
                url : "${pageContext.request.contextPath}/memberList",
                type : "get",
                dataType : "xml",
                success : function(data) {
                    var table = "" ;
                    $(data).find("member").each(function() {
                        table +="<tr>";
                        table +="<td>"+$(this).find("id").text()+"</td>";
                        table +="<td>"+$(this).find("password").text()+"</td>";
                        table +="<td>"+$(this).find("name").text()+"</td>";
                        table +="<td>"+$(this).find("email").text()+"</td>";
                        table +="<td>" ;
                        table += "<input type='button' value='삭제' id='del' name='"+$(this).find("id").text()+"' />";
                        table +="</tr>";
                    });
                    $("#tbody").append(table);    
                },
                error : function name() {
                    alert("실패")
                }
            });
        }// getList()끝
        
        // 중복확인
        $("#id").keyup(function() {
            $.ajax({
                url : "${pageContext.request.contextPath}/memberIdChk",
                type : "get",
                dataType : "text",
                data : "id="+$("#id").val(), // 서블릿으로 넘어가는 파라미터값
                success : function(data) {
                    $("span").html(data);
                },
                error : function name() {
                    alert("실패");
                }
            });
        });// 중복확인
        
        // 회원가입
        $("#btn").click(function() {
            $.ajax({
                url : "${pageContext.request.contextPath}/memberInsert",
                type : "get",
                dataType : "text",
                data : $("#myform").serialize(), // 파라미터를 직렬화
                success : function(data) {
                    if(data == 1){
                        alert("회원가입성공");
                        $("#tbody").empty();
                        getList();
                        $("input[type]").each(function() {
                            $(this).val("");
                        })
                        
                    }else{
                        alert("회원가입실패");    
                    }
                },
                error : function name() {
                    alert("실패");
                }
            });
        }); // 회원가입 끝
        
        // 삭제
        $("table").on("click","#del",function(){
            $.ajax({
                url : "${pageContext.request.contextPath}/memberDelete",
                type : "get",
                dataType : "text",
                data : "idx="+$(this).attr("name"), // 파라미터를 직렬화
                success : function(data) {
                    if(data == 1){
                        alert("삭제성공");
                        $("#tbody").empty();
                        getList();
                    }else{
                        alert("삭제실패");
                    }
                },
                error : function name() {
                    alert("실패");
                }
            });
        });
        // 리스트 함수 실행
        getList();
    });
</script>
</head>
<body>
    <h2> 회원 정보 입력하기 </h2>
    <form name="myform" method="post" id="myform">
        <table>
            <thead>
                <tr bgcolor="pink">
                    <th>ID</th>
                    <th>PW</th>
                    <th>NAME</th>
                    <th>EMAIL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" size="14" name="id" id="id" />
                        <span>중복결과여부</span>
                    </td>
                    <td><input type="password" size="14" name="password" id="password" /></td>
                    <td><input type="text" size="14" name="name" id="name" /></td>
                    <td><input type="email" size="14" name="email" id="email" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6" align="center">
                        <input type="button" value="가입하기" id="btn" />  
                    </td>
                </tr>
            </tfoot>
        </table>
    </form>
    <br /><br /><br /><br /><br />
    <h2> 멤버 리스트 </h2>
    <div>
        <table>
            <thead>
                <tr bgcolor="skyblue">
                    <th>ID</th><th>PASSWORD</th><th>NAME</th>
                    <th>EMAIL</th><th>DELETE</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</body>
</html>
 
cs

 

 

memberListService

 

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
package com.simple.service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import com.simple.dao.Mapper;
import com.simple.domain.MemberVO;
 
public class MemberListService implements Service {
 
    @Override
    public Map<String, Object> service(HttpServletRequest request, Mapper mapper) {
 
        String result = "<?xml version='1.0' encoding='UTF-8'?>";
        result += "<members>";
        List<MemberVO> list = mapper.memberList(); 
        for (MemberVO k : list) {
            result += "<member>";
            result += "<id>"+k.getId()+"</id>";
            result += "<password>"+k.getPassword()+"</password>";
            result += "<name>"+k.getName()+"</name>";
            result += "<email>"+k.getEmail()+"</email>";
            result += "</member>";
        }
        result+="</members>";
        
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("AjaxMember", result);
 
        // TODO Auto-generated method stub
        return map;
    }
 
}
 
cs

 

아이디 체크 서비스

 

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
package com.simple.service;
 
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import com.simple.dao.Mapper;
import com.simple.domain.MemberVO;
 
public class MemberIdChkService implements Service {
 
    @Override
    public Map<String, Object> service(HttpServletRequest request, Mapper mapper) {
 
        String id = request.getParameter("id");
        MemberVO memberVO= mapper.getIdCheck(id);
        String result = "";
        if (memberVO == null) {
            result = "사용 가능";
        }
        else {
            result = "사용 불가";
        }
        
        Map<String, Object> map = new HashMap<>();
        map.put("result", result);
        
        return map;
    }
}
cs

 

 

회원가입 서비스

 

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
package com.simple.service;
 
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import com.simple.dao.Mapper;
import com.simple.domain.MemberVO;
 
public class MemberInsertService implements Service {
 
    @Override
    public Map<String, Object> service(HttpServletRequest request, Mapper mapper) {
        MemberVO memberVO = new MemberVO();
        memberVO.setId(request.getParameter("id"));
        memberVO.setPassword(request.getParameter("password"));
        memberVO.setName(request.getParameter("name"));
        memberVO.setEmail(request.getParameter("email"));
        mapper.joinMember(memberVO);
        
        Map<String, Object> map = new HashMap<>();
        map.put("result"1);
        
 
        return map;
    }
}
 
cs

 

 

회원 삭제 서비스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.simple.service;
 
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import com.simple.dao.Mapper;
 
public class MemberDeleteService implements Service {
 
    @Override
    public Map<String, Object> service(HttpServletRequest request, Mapper mapper) {
        String id = request.getParameter("id");
        mapper.memberDelete(id);
        Map<String, Object> map = new HashMap<>();    
        map.put("result"1);
        return map;
    }
}
cs

 

 

mapper 에 작성된 쿼리문

 

1
2
3
4
5
6
7
8
<select id="memberList" resultType="com.simple.domain.MemberVO">
      select * from member
  </select>
  
  <select id="getIdCheck" resultType="com.simple.domain.MemberVO" parameterType="String">
      select * from member where id = #{id}
  </select>
  
cs

 

1
2
3
 <insert id="joinMember" parameterType="com.simple.domain.MemberVO">
    insert into member values(#{id},#{password},#{name},#{email})
  </insert>
cs

 

1
2
3
4
<delete id="memberDelete" parameterType="String">
      delete from member where id=#{id}
  
  </delete>
cs

 

 

 

 

Controller소스 - 컨트롤러는 모두 void형으로 화면에 해당 자료를 PrintWriter한다

 

1
2
3
4
5
6
7
8
9
10
11
12
@RequestMapping(value="/memberList")
    public void memberList(HttpServletRequest request,HttpServletResponse response) throws Exception {//ajax는 void형 함수를 사용한다.
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        MemberListService memberListService = new MemberListService();
        Map<String,Object> map = memberListService.service(request, mapper);
        String result = (String) map.get("AjaxMember");
        out.println(result);        
    }
    
    
cs

 

IDcheck 컨트롤러

 

1
2
3
4
5
6
7
8
9
10
11
@RequestMapping(value="/memberIdChk")
    public void memberIdChk(HttpServletRequest request,HttpServletResponse response) throws Exception {//ajax는 void형 함수를 사용한다.
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        MemberIdChkService memberIdChkService = new MemberIdChkService();
        
        Map<String,Object> map = memberIdChkService.service(request, mapper);
        String result = (String) map.get("result");
        out.println(result);        
    }
cs

 

 

회원가입 컨트롤러

 

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    @RequestMapping(value="/memberInsert")
    public void memberInsert(HttpServletRequest request,HttpServletResponse response) throws Exception {//ajax는 void형 함수를 사용한다.
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        MemberInsertService memberInsertService = new MemberInsertService();
        Map<String, Object> map = memberInsertService.service(request, mapper); 
        
        int result = (int) map.get("result");
        out.println(result);        
    }
    
cs

 

회원삭제 컨트롤러

 

1
2
3
4
5
6
7
8
9
10
@RequestMapping(value="/memberDelete")
    public void memberDelete(HttpServletRequest request,HttpServletResponse response) throws Exception{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
        PrintWriter out = response.getWriter();
        MemberDeleteService memberDeleteService = new MemberDeleteService();
        Map<String, Object> map = memberDeleteService.service(request, mapper);
        int result = (int)map.get("result");
        out.println(result);
    }
cs

 

 

댓글