1. 화면에서 수정삭제 버튼 클릭하면
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
String path = request.getContextPath();
%>
<script src="http://code.jquery.com/jquery-3.1.0.js"> </script>
<script>
$(document).ready(function() {
//삭제
$("#btnDelete").click(function(){
if( confirm("정말 삭제 하시겠습니까?")){
//주소 이동
//수정과 삭제의 주소가 달라서 form 태그 안에 적어주지 않고 이곳에 적어준다.
var idx = $("#idx").val();
document.form1.action="<%=path%>/memo_servlet/delete.do?idx=" + idx;
document.form1.submit(); //서버에 제출
}
});
//업데이트
$("#btnUpdate").click(function() {
//var writer = $("#writer").val(); id로 조회
//name으로 조회
var writer = document.form1.writer;
var memo = document.form1.memo;
if (writer.value == "") { //빈 값 체크
alert("이름을 입력하세요");
writer.focus();
return;
}
if (memo.value == "") {
alert("메모를 입력하세요");
memo.focus();
return;
}
//주소 이동
//수정과 삭제의 주소가 달라서 form 태그 안에 적어주지 않고 이곳에 적어준다.
var idx = $("#idx").val();
document.form1.action="<%=path%>/memo_servlet/update.do?idx="+ idx;
document.form1.submit(); //서버에 제출
});
});
</script>
</head>
<body>
<!-- post면 주소에 던져지는 값 안보임 -->
<form name="form1" method="post">
<table border="1">
<tr>
<td>날짜</td>
<td>${dto.post_date}</td>
</tr>
<tr>
<td>이름</td>
<td><input name="writer" value="${dto.writer}"></td>
</tr>
<tr>
<td>메모</td>
<td><textarea name="memo"> ${dto.memo} </textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- 수정 삭제 할때 번호를 넘겨야 하는데 idx를 화면에 보여주지 않고 넘기는 법 --> <input
type="hidden" id="idx" value="${dto.idx} ">
<input type="button" value="수정" id="btnUpdate">
<input type="button" value="삭제" id="btnDelete">
</td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
2컨트롤러로 간다
|
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
|
else if (url.indexOf("update.do") != -1) {
int idx = Integer.parseInt(request.getParameter("idx"));
String writer = request.getParameter("writer");
String memo = request.getParameter("memo");
// dao에 update 요청
dao.memoUpdate(idx, writer, memo);
// 페이지 이동(redirect)
response.sendRedirect(context + "/memo/index.jsp");
// 페이지 이동(redirect)
}else if(url.indexOf("delete.do")!=-1){
int idx=Integer.parseInt(request.getParameter("idx"));
dao.memoDelete(idx);
// 페이지 이동(redirect)
response.sendRedirect(context + "/memo/index.jsp");
}
}
|
cs |
3. DAO
|
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
|
// 업데이트
public void memoUpdate(int idx, String writer, String memo) {
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DB.dbConn();
String sql = "update memo set writer=? , memo = ? where idx= ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, writer);
pstmt.setString(2, memo);
pstmt.setInt(3, idx);
// 업데이트 성공하면 1 리턴
int count = pstmt.executeUpdate();
// MemoView(idx);
} catch (Exception e) {
} finally {// resultset= > statement=> connection
try {
if (pstmt != null) {
pstmt.close();
}
} catch (Exception e2) {
e2.printStackTrace();
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception e2) {
e2.printStackTrace();
}
}
}
// 삭제
public void memoDelete(int idx) {
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DB.dbConn();
String sql = "delete from memo where idx = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, idx);
// 업데이트 성공하면 1 리턴
int count = pstmt.executeUpdate();
// MemoView(idx);
} catch (Exception e) {
} finally {// resultset= > statement=> connection
try {
if (pstmt != null) {
pstmt.close();
}
} catch (Exception e2) {
e2.printStackTrace();
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception e2) {
e2.printStackTrace();
}
}
}
|
cs |
4.마지막으로 INSERT 화면 호출
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.0.js">
</script>
<%
//context path: 웹프로젝트의 식별자
String path = request.getContextPath();
%>
<script>
$(document).ready(function(){
memo_list();
//추가버튼 클릭 이벤트
$("#btnAdd").click(function (){
memo_insert();
});
});
//추가 버튼 함수
function memo_insert(){
//input 태그에 입력한 값
var writer=$("#writer").val();
var memo=$("#memo").val();
//금칙어 처리
var bad_word_list = ["<xmp>", "<script>"];
for(var i=0; i<bad_word_list.length; i++){
if(memo.indexOf(bad_word_list[i]) != -1){
alert(
bad_word_list[i]+"는 입력할 수 없습니다."
);
$("#memo").focus();
return;
}
}
//쿼리 구성
var param = "writer="+writer+"&memo="+memo;
$.ajax({
type: "post",
data: param,
url: "<%=path%>/memo_servlet/insert.do",
success: function(){
//콜백함수
// 추가 완료되면 목록을 갱신함
memo_list();
}
});
}
function memo_list(){
//함수
$.ajax({
//함수의 파라미터
url: "<%=path%>/memo_servlet/list.do",
success : function(result) {
//result : Response Text (서버의 응답텍스트)
// div의 내용을 교체함
$("#divList").html(result);
}
})
}
</script>
</head>
<body>
이름
<input id="writer" size="10">
<br>
메모
<textarea id="memo" rows="5" cols="30"> </textarea>
<!-- <input id="memo" size="30"> -->
<!-- 버튼은 전송기능이 없어서 js를 이용해줘야한다 -->
<input type="button" id="btnAdd" value="확인">
<h2>한줄메모장</h2>
<div id="divList">이곳에 목록이 출력됩니다.</div>
</body>
</html>
|
cs |
JSP - 한줄메모 목록 리스트 AJAX
JSP - 한줄메모 삽입 & AJAX