65Day
ajax 를 통해 덧글달기
ajax는 페이지이동 그런거 안해도됨
sql 테이블
create table ajax_comment(num number primary key, writer varchar2(50)
, content varchar2(500), regdate date);
create sequence ajax_comment_seq;
src / main /java> xyz.itwill.dto )
AjaxCommentDTO .java ( 먼저 sql 테이블만들기)
package xyz.itwill.dto;
//create table ajax_comment(num number primary key, writer varchar2(50)
// , content varchar2(500), regdate date);
//create sequence ajax_comment_seq;
public class AjaxCommentDTO {
private int num;
private String writer;
private String content;
private String regdate;
public AjaxCommentDTO() {
// TODO Auto-generated constructor stub
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String getWriter() {
return writer;
}
public void setWriter(String writer) {
this.writer = writer;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getRegdate() {
return regdate;
}
public void setRegdate(String regdate) {
this.regdate = regdate;
}
}
src / main /java> xyz.itwill.dao )
AjaxCommentDAO .java
package xyz.itwill.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import xyz.itwill.dto.AjaxCommentDTO;
public class AjaxCommentDAO extends JdbcDAO {
private static AjaxCommentDAO _dao;
private AjaxCommentDAO() {
// TODO Auto-generated constructor stub
}
static {
_dao=new AjaxCommentDAO();
}
public static AjaxCommentDAO getDAO() {
return _dao;
}
//댓글정보를 전달받아 AJAX_COMMENT 테이블에 댓글정보로 삽입하고 삽입행의 갯수를 반환하는 메소드
public int insertAjaxComment(AjaxCommentDTO ajaxComment) {
Connection con=null;
PreparedStatement pstmt=null;
int rows=0;
try {
con=getConnection();
String sql="insert into ajax_comment values(ajax_comment_seq.nextval,?,?,sysdate)";
pstmt=con.prepareStatement(sql);
pstmt.setString(1, ajaxComment.getWriter());
pstmt.setString(2, ajaxComment.getContent());
rows=pstmt.executeUpdate();
} catch (SQLException e) {
System.out.println("[에러]insertAjaxComment() 메소드의 SQL 오류 = "+e.getMessage());
} finally {
close(con, pstmt);
}
return rows;
}
//댓글정보를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 변경하고 변경행의 갯수를 반환하는 메소드
public int updateAjaxComment(AjaxCommentDTO ajaxComment) {
Connection con=null;
PreparedStatement pstmt=null;
int rows=0;
try {
con=getConnection();
String sql="update ajax_comment set writer=?, content=? where num=?";
pstmt=con.prepareStatement(sql);
pstmt.setString(1, ajaxComment.getWriter());
pstmt.setString(2, ajaxComment.getContent());
pstmt.setInt(3, ajaxComment.getNum());
rows=pstmt.executeUpdate();
} catch (SQLException e) {
System.out.println("[에러]updateAjaxComment() 메소드의 SQL 오류 = "+e.getMessage());
} finally {
close(con, pstmt);
}
return rows;
}
//댓글번호를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 삭제하고 삭제행의 갯수를 반환하는 메소드
public int deleteAjaxComment(int num) {
Connection con=null;
PreparedStatement pstmt=null;
int rows=0;
try {
con=getConnection();
String sql="delete from ajax_comment where num=?";
pstmt=con.prepareStatement(sql);
pstmt.setInt(1, num);
rows=pstmt.executeUpdate();
} catch (SQLException e) {
System.out.println("[에러]deleteAjaxComment() 메소드의 SQL 오류 = "+e.getMessage());
} finally {
close(con, pstmt);
}
return rows;
}
//댓글번호를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 검색하여 DTO 객체로 반환하는 메소드
public AjaxCommentDTO selectAjaxComment(int num) {
Connection con=null;
PreparedStatement pstmt=null;
ResultSet rs=null;
AjaxCommentDTO ajaxComment=null;
try {
con=getConnection();
String sql="select * from ajax_comment where num=?";
pstmt=con.prepareStatement(sql);
pstmt.setInt(1, num);
rs=pstmt.executeQuery();
if(rs.next()) {
ajaxComment=new AjaxCommentDTO();
ajaxComment.setNum(rs.getInt("num"));
ajaxComment.setWriter(rs.getString("writer"));
ajaxComment.setContent(rs.getString("content"));
ajaxComment.setRegdate(rs.getString("regdate"));
}
} catch (SQLException e) {
System.out.println("[에러]selectAjaxComment() 메소드의 SQL 오류 = "+e.getMessage());
} finally {
close(con, pstmt, rs);
}
return ajaxComment;
}
//AJAX_COMMENT 테이블에 저장된 모든 댓글정보를 검색하여 List 객체로 반환하는 메소드
public List<AjaxCommentDTO> selectAjaxCommentList() {
Connection con=null;
PreparedStatement pstmt=null;
ResultSet rs=null;
List<AjaxCommentDTO> ajaxCommentList=new ArrayList<>();
try {
con=getConnection();
String sql="select * from ajax_comment order by num desc";
pstmt=con.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next()) {
AjaxCommentDTO ajaxComment=new AjaxCommentDTO();
ajaxComment.setNum(rs.getInt("num"));
ajaxComment.setWriter(rs.getString("writer"));
ajaxComment.setContent(rs.getString("content"));
ajaxComment.setRegdate(rs.getString("regdate"));
ajaxCommentList.add(ajaxComment);
}
} catch (SQLException e) {
System.out.println("[에러]selectAjaxCommentList() 메소드의 SQL 오류 = "+e.getMessage());
} finally {
close(con, pstmt, rs);
}
return ajaxCommentList;
}
}
src / main /java> xyz.itwill.util )
Utility.java
package xyz.itwill.util;
public class Utility {
//JSON 데이타를 전달받아 JSON 데이타로 사용 불가능한 문자를 회피문자로 변환하여 반환하는 메소드
public static String toJSON(String source) {
return source.replace("\\", "\\\\").replace("\"", "\\\"")
.replace("\n", "\\n").replace("\r\n", "\\n");
}
//문자열을 전달받아 태그 관련 문자를 회피문자로 변경하여 반환하는 메소드
public static String escapeTag(String source) {
return source.replace("<", "<").replace(">", ">");
}
}
main > webapp > comment)
comment .jsp - 160번줄 +this.num 글번호중복 방지
-- AJAX_COMMENT 테이블에 저장된 댓글 목록을 검색하여 클라이언트에게 전달하여 응답하는 문서
댓글을 입력받아 AJAX_COMMENT 테이블에 삽입하고 댓글을 변경, 삭제하는 기능 구현
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- AJAX_COMMENT 테이블에 저장된 댓글 목록을 검색하여 클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => 댓글을 입력받아 AJAX_COMMENT 테이블에 삽입하고 댓글을 변경, 삭제하는 기능 구현 --%>
<%-- => AJAX 기능을 사용하여 삽입, 변경, 삭제, 검색 기능의 웹프로그램을 요청하여 응답받아 처리 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
h1 {
text-align: center;
}
.comment_table {
width: 500px;
margin: 0 auto;
border: 2px solid #cccccc;
border-collapse: collapse;
}
.title {
width: 100px;
padding: 5px 10px;
text-align: center;
border: 1px solid #cccccc;
}
.input {
width: 400px;
padding: 5px 10px;
border: 1px solid #cccccc;
}
.btn {
text-align: center;
border: 1px solid #cccccc;
}
#comment_add {
margin-bottom: 5px;
}
#comment_modify, #comment_remove {
margin: 10px;
display: none;
}
#add_message, #modify_message {
width: 500px;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
color: red;
}
#remove_message {
padding: 3px;
text-align: center;
border: 1px solid #cccccc;
}
.comment {
width: 550px;
margin: 0 auto;
margin-bottom: 5px;
padding: 3px;
border: 1px solid #cccccc;
}
.no_comment {
width: 550px;
margin: 0 auto;
margin-bottom: 5px;
border: 2px solid #cccccc;
text-align: center;
}
</style>
</head>
<body>
<h1>AJAX 댓글</h1>
<hr>
<%-- 댓글등록태그 --%>
<div id="comment_add">
<table class="comment_table">
<tr>
<td class="title">작성자</td>
<td class="input"><input type="text" id="add_writer"></td>
</tr>
<tr>
<td class="title">내용</td>
<td class="input">
<textarea rows="3" cols="50" id="add_content"></textarea>
</td>
</tr>
<tr>
<td class="btn" colspan="2">
<button type="button" id="add_btn">댓글등록</button>
</td>
</tr>
</table>
<div id="add_message"> </div>
</div>
<%-- 댓글목록태그 --%>
<div id="comment_list"></div>
<%-- 댓글변경태그 --%>
<div id="comment_modify">
<input type="hidden" id="modify_num">
<table class="comment_table">
<tr>
<td class="title">작성자</td>
<td class="input"><input type="text" id="modify_writer"></td>
</tr>
<tr>
<td class="title">내용</td>
<td class="input">
<textarea rows="3" cols="50" id="modify_content"></textarea>
</td>
</tr>
<tr>
<td class="btn" colspan="2">
<button type="button" id="modify_btn">변경</button>
<button type="button" id="modify_cancel_btn">취소</button>
</td>
</tr>
</table>
<div id="modify_message"> </div>
</div>
<%-- 댓글삭제태그 --%>
<div id="comment_remove">
<input type="hidden" id="remove_num">
<div id="remove_message">
<b>정말로 삭제 하시겠습니까?</b>
<button type="button" id="remove_btn">삭제</button>
<button type="button" id="remove_cancel_btn">취소</button>
</div>
</div>
<script type="text/javascript">
displayComment();
//[comment_list.jsp] 문서를 AJAX 기능으로 요청하여 댓글목록을 JSON 데이타로 응답받아 태그에 출력하는 함수
function displayComment() {
$.ajax({
type: "get",
url: "comment_list.jsp",
dataType: "json",
success: function(result) {
//댓글목록태그에 출력된 기존 댓글들을 삭제 처리 - 초기화
$("#comment_list").children().remove();
if(result.code=="success") {//검색된 댓글정보가 있는 경우
$(result.data).each(function() {
//Array 객체의 요소값(Object 객체 - 댓글정보)을 HTML 태그로 변환
var html="<div class='comment' id='comment_"+this.num+"'>";//댓글태그
html+="<b>["+this.writer+"]</b><br>";//작성자
html+=this.content.replace(/\n/g,"<br>")+"<br>";//내용
html+="("+this.regdate+")<br>";//작성날짜
html+="<button type='button' onclick='modifyComment("+this.num+")'>댓글변경</button> ";//변경버튼
html+="<button type='button' onclick='removeComment("+this.num+")'>댓글삭제</button> ";//삭제버튼
html+="</div>";
//댓글목록태그에 댓글태그를 마지막 자식태그로 추가하여 출력 처리
$("#comment_list").append(html);
});
} else {//검색된 댓글정보가 없는 경우
$("#comment_list").html("<div class='no_comment'>"+result.message+"</div>");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//[댓글등록] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글정보)을 반환받아 AJAX_COMMENT 테이블에 댓글정보를 삽입하는
//[comment_add.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
$("#add_btn").click(function() {
var writer=$("#add_writer").val();
if(writer=="") {
$("#add_message").html("작성자를 입력해 주세요.");
$("#add_writer").focus();
return;
}
var content=$("#add_content").val();
if(content=="") {
$("#add_message").html("내용을 입력해 주세요.");
$("#add_content").focus();
return;
}
$("#add_writer").val("");
$("#add_content").val("");
$("#add_message").html("");
$.ajax({
type: "post",
url: "comment_add.jsp",
data: {"writer":writer, "content":content},
dataType: "json",
success: function(result) {
if(result.code=="success") {
displayComment();
} else {
alert("댓글 삽입 실패");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//댓글변경태그와 댓글삭제태그를 초기화 처리하는 함수
function init() {
//댓글변경태그를 숨김 처리하고 document 객체의 마지막 자식태그로 이동
$("#comment_modify").hide().appendTo(document.documentElement);
//댓글변경태그의 입력태그 초기화
$("#modify_num").val("");
$("#modify_writer").val("");
$("#modify_content").val("");
//댓글변경태그의 메세지태그 초기화
$("#modify_message").html("");
//댓글삭제태그를 숨김 처리하고 document 객체의 마지막 자식태그로 이동
$("#comment_remove").hide().appendTo(document.documentElement);
//댓글삭제태그의 입력태그 초기화
$("#remove_num").val("");
}
//댓글태그에서 [댓글변경] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
// => 댓글변경태그를 댓글태그에 자식태그로 이동하여 출력하고 [comment_get.jsp] 문서를
//AJAX 기능으로 요청하여 실행결과를 JSON 데이타로 응답받아 입력태그의 입력값으로 변경
function modifyComment(num) {
//alert(num);
init();
//댓글변경태그를 보여지도록 처리하고 댓글태그의 마지막 자식태그로 이동
$("#comment_modify").show().appendTo("#comment_"+num);
$.ajax({
type: "get",
url: "comment_get.jsp",
data: {"num":num},
dataType: "json",
success: function(result) {
if(result.code=="success") {//검색된 댓글정보가 있는 경우
$("#modify_num").val(result.data.num);
$("#modify_writer").val(result.data.writer);
$("#modify_content").val(result.data.content);
} else {
init();
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//댓글변경태그에서 [변경] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글정보)을 반환받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 변경하는
//[comment_modify.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
$("#modify_btn").click(function() {
var num=$("#modify_num").val();
var writer=$("#modify_writer").val();
if(writer=="") {
$("#modify_message").html("작성자를 입력해 주세요.");
$("#modify_writer").focus();
return;
}
var content=$("#modify_content").val();
if(content=="") {
$("#modify_message").html("내용을 입력해 주세요.");
$("#modify_content").focus();
return;
}
$.ajax({
type: "post",
url: "comment_modify.jsp",
data: {"num":num, "writer":writer, "content":content},
dataType: "json",
success: function(result) {
if(result.code=="success") {
displayComment();
init();
} else {
alert("댓글 변경 실패");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//댓글변경태그에서 [취소] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#modify_cancel_btn").click(init);
//댓글태그에서 [댓글삭제] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
// => 댓글삭제태그를 댓글태그에 자식태그로 이동하여 출력 처리
function removeComment(num) {
init();
//댓글삭제태그를 보여지도록 처리하고 댓글태그의 마지막 자식태그로 이동
$("#comment_remove").show().appendTo("#comment_"+num);
//댓글삭제태그를 입력태그의 입력값(댓글번호) 변경
$("#remove_num").val(num);
}
//댓글삭제태그에서 [삭제] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글번호)을 반환받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 삭제하는
//[comment_remove.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
//댓글삭제태그에서 [취소] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
</script>
</body>
</html>
comment_add .jsp
-- 댓글정보를 전달받아 AJAX_COMMENT 테이블에 댓글정보로 삽입/ 실행결과를 JSON 데이타로 응답하는 JSP 문서
<%@page import="xyz.itwill.util.Utility"%>
<%@page import="xyz.itwill.dao.AjaxCommentDAO"%>
<%@page import="xyz.itwill.dto.AjaxCommentDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 댓글정보를 전달받아 AJAX_COMMENT 테이블에 댓글정보로 삽입하고 실행결과를 JSON 데이타로 응답하는 JSP 문서 --%>
<%
if(request.getMethod().equals("GET")) {
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED);
return;
}
request.setCharacterEncoding("utf-8");
String writer=Utility.escapeTag(request.getParameter("writer"));
String content=Utility.escapeTag(request.getParameter("content"));
AjaxCommentDTO ajaxComment=new AjaxCommentDTO();
ajaxComment.setWriter(writer);
ajaxComment.setContent(content);
int rows=AjaxCommentDAO.getDAO().insertAjaxComment(ajaxComment);
%>
<% if(rows>0) {//삽입행이 있는 경우 %>
{"code":"success"}
<% } else {//삽입행이 없는 경우 %>
{"code":"error"}
<% } %>
comment_get .jsp
-- 댓글번호를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 검색하여 JSON 데이타로 응답하는 JSP 문서
<%@page import="xyz.itwill.util.Utility"%>
<%@page import="xyz.itwill.dao.AjaxCommentDAO"%>
<%@page import="xyz.itwill.dto.AjaxCommentDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 댓글번호를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 검색하여 JSON 데이타로 응답하는 JSP 문서 --%>
<%
if(request.getParameter("num")==null) {
response.sendError(HttpServletResponse.SC_BAD_REQUEST);
return;
}
int num=Integer.parseInt(request.getParameter("num"));
AjaxCommentDTO ajaxComment=AjaxCommentDAO.getDAO().selectAjaxComment(num);
%>
<% if(ajaxComment==null) {//검색된 댓글정보가 없는 경우 %>
{"code":"empty"}
<% } else {//검색된 댓글정보가 있는 경우 %>
{"code":"success","data":{"num":<%=ajaxComment.getNum() %>
,"writer":"<%=Utility.toJSON(ajaxComment.getWriter()) %>"
,"content":"<%=Utility.toJSON(ajaxComment.getContent()) %>"
,"regdate":"<%=ajaxComment.getRegdate() %>"}
}
<% } %>
comment_list .jsp * JSON중요함
-- AJAX_COMMENT 테이블에 저장된 모든 댓글정보를 검색하여 JSON 데이타로 응답문서
<%@page import="xyz.itwill.util.Utility"%>
<%@page import="xyz.itwill.dao.AjaxCommentDAO"%>
<%@page import="xyz.itwill.dto.AjaxCommentDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- AJAX_COMMENT 테이블에 저장된 모든 댓글정보를 검색하여 JSON 데이타로 응답하는 JSP 문서 --%>
<%
List<AjaxCommentDTO> ajaxCommentList=AjaxCommentDAO.getDAO().selectAjaxCommentList();
%>
<% if(ajaxCommentList.isEmpty()) {//검색된 댓글정보가 없는 경우 %>
{"code":"empty","message":"첫번째 댓글을 입력해 주세요."}
<% } else {//검색된 댓글정보가 있는 경우 %>
{
"code":"success",
"data":[
<% for(int i=0;i<ajaxCommentList.size();i++) { %>
<% if(i>0) { %>,<% } %>
{"num":<%=ajaxCommentList.get(i).getNum() %>
,"writer":"<%=Utility.toJSON(ajaxCommentList.get(i).getWriter()) %>"
,"content":"<%=Utility.toJSON(ajaxCommentList.get(i).getContent()) %>"
,"regdate":"<%=ajaxCommentList.get(i).getRegdate() %>"}
<% } %>
]
}
<% } %>
comment_modify .jsp
-- 댓글정보를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보로 변경,실행결과를 JSON 데이터로 응답하는 문서
<%@page import="xyz.itwill.util.Utility"%>
<%@page import="xyz.itwill.dao.AjaxCommentDAO"%>
<%@page import="xyz.itwill.dto.AjaxCommentDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 댓글정보를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보로 변경하고 실행결과를 JSON 데이타로 응답하는 JSP 문서 --%>
<%
if(request.getMethod().equals("PUT")) {
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED);
return;
}
request.setCharacterEncoding("utf-8");
int num=Integer.parseInt(request.getParameter("num"));
String writer=Utility.escapeTag(request.getParameter("writer"));
String content=Utility.escapeTag(request.getParameter("content"));
AjaxCommentDTO ajaxComment=new AjaxCommentDTO();
ajaxComment.setNum(num);
ajaxComment.setWriter(writer);
ajaxComment.setContent(content);
int rows=AjaxCommentDAO.getDAO().updateAjaxComment(ajaxComment);
%>
<% if(rows>0) {//변경행이 있는 경우 %>
{"code":"success"}
<% } else {//변경행이 없는 경우 %>
{"code":"error"}
<% } %>
덧글 등록 및 수정(수정 코드는 밑에.)
66Day
7월 7일 (66Day)
덧글 수정 및 삭제 구현
src > main > webapp > comment )
comment.jsp (수정)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- AJAX_COMMENT 테이블에 저장된 댓글 목록을 검색하여 클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => 댓글을 입력받아 AJAX_COMMENT 테이블에 삽입하고 댓글을 변경, 삭제하는 기능 구현 --%>
<%-- => AJAX 기능을 사용하여 삽입, 변경, 삭제, 검색 기능의 웹프로그램을 요청하여 응답받아 처리 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
h1 {
text-align: center;
}
.comment_table {
width: 500px;
margin: 0 auto;
border: 2px solid #cccccc;
border-collapse: collapse;
}
.title {
width: 100px;
padding: 5px 10px;
text-align: center;
border: 1px solid #cccccc;
}
.input {
width: 400px;
padding: 5px 10px;
border: 1px solid #cccccc;
}
.btn {
text-align: center;
border: 1px solid #cccccc;
}
#comment_add {
margin-bottom: 5px;
}
#comment_modify, #comment_remove {
margin: 10px;
display: none;
}
#add_message, #modify_message {
width: 500px;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
color: red;
}
#remove_message {
padding: 3px;
text-align: center;
border: 1px solid #cccccc;
}
.comment {
width: 550px;
margin: 0 auto;
margin-bottom: 5px;
padding: 3px;
border: 1px solid #cccccc;
}
.no_comment {
width: 550px;
margin: 0 auto;
margin-bottom: 5px;
border: 2px solid #cccccc;
text-align: center;
}
</style>
</head>
<body>
<h1>AJAX 댓글</h1>
<hr>
<%-- 댓글등록태그 --%>
<div id="comment_add">
<table class="comment_table">
<tr>
<td class="title">작성자</td>
<td class="input"><input type="text" id="add_writer"></td>
</tr>
<tr>
<td class="title">내용</td>
<td class="input">
<textarea rows="3" cols="50" id="add_content"></textarea>
</td>
</tr>
<tr>
<td class="btn" colspan="2">
<button type="button" id="add_btn">댓글등록</button>
</td>
</tr>
</table>
<div id="add_message"> </div>
</div>
<%-- 댓글목록태그 --%>
<div id="comment_list"></div>
<%-- 댓글변경태그 --%>
<div id="comment_modify">
<input type="hidden" id="modify_num">
<table class="comment_table">
<tr>
<td class="title">작성자</td>
<td class="input"><input type="text" id="modify_writer"></td>
</tr>
<tr>
<td class="title">내용</td>
<td class="input">
<textarea rows="3" cols="50" id="modify_content"></textarea>
</td>
</tr>
<tr>
<td class="btn" colspan="2">
<button type="button" id="modify_btn">변경</button>
<button type="button" id="modify_cancel_btn">취소</button>
</td>
</tr>
</table>
<div id="modify_message"> </div>
</div>
<%-- 댓글삭제태그 --%>
<div id="comment_remove">
<input type="hidden" id="remove_num">
<div id="remove_message">
<b>정말로 삭제 하시겠습니까?</b>
<button type="button" id="remove_btn">삭제</button>
<button type="button" id="remove_cancel_btn">취소</button>
</div>
</div>
<script type="text/javascript">
displayComment();
//[comment_list.jsp] 문서를 AJAX 기능으로 요청하여 댓글목록을 JSON 데이타로 응답받아 태그에 출력하는 함수
function displayComment() {
$.ajax({
type: "get",
url: "comment_list.jsp",
dataType: "json",
success: function(result) {
//댓글목록태그에 출력된 기존 댓글들을 삭제 처리 - 초기화
$("#comment_list").children().remove();
if(result.code=="success") {//검색된 댓글정보가 있는 경우
$(result.data).each(function() {
//Array 객체의 요소값(Object 객체 - 댓글정보)을 HTML 태그로 변환
var html="<div class='comment' id='comment_"+this.num+"'>";//댓글태그
html+="<b>["+this.writer+"]</b><br>";//작성자
html+=this.content.replace(/\n/g,"<br>")+"<br>";//내용
html+="("+this.regdate+")<br>";//작성날짜
html+="<button type='button' onclick='modifyComment("+this.num+")'>댓글변경</button> ";//변경버튼
html+="<button type='button' onclick='removeComment("+this.num+")'>댓글삭제</button> ";//삭제버튼
html+="</div>";
//댓글목록태그에 댓글태그를 마지막 자식태그로 추가하여 출력 처리
$("#comment_list").append(html);
});
} else {//검색된 댓글정보가 없는 경우
$("#comment_list").html("<div class='no_comment'>"+result.message+"</div>");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//[댓글등록] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글정보)을 반환받아 AJAX_COMMENT 테이블에 댓글정보를 삽입하는
//[comment_add.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
$("#add_btn").click(function() {
var writer=$("#add_writer").val();
if(writer=="") {
$("#add_message").html("작성자를 입력해 주세요.");
$("#add_writer").focus();
return;
}
var content=$("#add_content").val();
if(content=="") {
$("#add_message").html("내용을 입력해 주세요.");
$("#add_content").focus();
return;
}
$("#add_writer").val("");
$("#add_content").val("");
$("#add_message").html("");
$.ajax({
type: "post",
url: "comment_add.jsp",
data: {"writer":writer, "content":content},
dataType: "json",
success: function(result) {
if(result.code=="success") {
displayComment();
} else {
alert("댓글 삽입 실패");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//댓글변경태그와 댓글삭제태그를 초기화 처리하는 함수
function init() {
//댓글변경태그를 숨김 처리하고 document 객체의 마지막 자식태그로 이동
$("#comment_modify").hide().appendTo(document.documentElement);
//댓글변경태그의 입력태그 초기화
$("#modify_num").val("");
$("#modify_writer").val("");
$("#modify_content").val("");
//댓글변경태그의 메세지태그 초기화
$("#modify_message").html("");
//댓글삭제태그를 숨김 처리하고 document 객체의 마지막 자식태그로 이동
$("#comment_remove").hide().appendTo(document.documentElement);
//댓글삭제태그의 입력태그 초기화
$("#remove_num").val("");
}
//댓글태그에서 [댓글변경] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
// => 댓글변경태그를 댓글태그에 자식태그로 이동하여 출력하고 [comment_get.jsp] 문서를
//AJAX 기능으로 요청하여 실행결과를 JSON 데이타로 응답받아 입력태그의 입력값으로 변경
function modifyComment(num) {
//alert(num);
init();
//댓글변경태그를 보여지도록 처리하고 댓글태그의 마지막 자식태그로 이동
$("#comment_modify").show().appendTo("#comment_"+num);
$.ajax({
type: "get",
url: "comment_get.jsp",
data: {"num":num},
dataType: "json",
success: function(result) {
if(result.code=="success") {//검색된 댓글정보가 있는 경우
$("#modify_num").val(result.data.num);
$("#modify_writer").val(result.data.writer);
$("#modify_content").val(result.data.content);
} else {
init();
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//댓글변경태그에서 [변경] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글정보)을 반환받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 변경하는
//[comment_modify.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
$("#modify_btn").click(function() {
var num=$("#modify_num").val();
var writer=$("#modify_writer").val();
if(writer=="") {
$("#modify_message").html("작성자를 입력해 주세요.");
$("#modify_writer").focus();
return;
}
var content=$("#modify_content").val();
if(content=="") {
$("#modify_message").html("내용을 입력해 주세요.");
$("#modify_content").focus();
return;
}
$.ajax({
type: "post",
url: "comment_modify.jsp",
data: {"num":num, "writer":writer, "content":content},
dataType: "json",
success: function(result) {
if(result.code=="success") {
init();
displayComment();
} else {
alert("댓글 변경 실패");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//댓글변경태그에서 [취소] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#modify_cancel_btn").click(init);
//댓글태그에서 [댓글삭제] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
// => 댓글삭제태그를 댓글태그에 자식태그로 이동하여 출력 처리
function removeComment(num) {
init();
//댓글삭제태그를 보여지도록 처리하고 댓글태그의 마지막 자식태그로 이동
$("#comment_remove").show().appendTo("#comment_"+num);
//댓글삭제태그를 입력태그의 입력값(댓글번호) 변경
$("#remove_num").val(num);
}
//댓글삭제태그에서 [삭제] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(댓글번호)을 반환받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 삭제하는
//[comment_remove.jsp] 문서를 AJAX 기능으로 요청하고 실행결과를 JSON 데이타로 응답받아 처리
$("#remove_btn").click(function() {
var num=$("#remove_num").val();
$.ajax({
type: "get",
url: "comment_remove.jsp",
data: {"num":num},
dataType: "json",
success: function(result) {
if(result.code=="success") {
init();
displayComment();
} else {
alert("댓글 삭제 실패");
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//댓글삭제태그에서 [취소] 태그를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#remove_cancel_btn").click(init);
</script>
</body>
</html>
comment_remove .jsp
<%@page import="xyz.itwill.dao.AjaxCommentDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 댓글번호를 전달받아 AJAX_COMMENT 테이블에 저장된 댓글정보를 삭제하고 실행결과를 JSON 테이타로 응답하는 JSP 문서 --%>
<%
if(request.getParameter("num")==null) {
response.sendError(HttpServletResponse.SC_BAD_REQUEST);
return;
}
int num=Integer.parseInt(request.getParameter("num"));
int rows=AjaxCommentDAO.getDAO().deleteAjaxComment(num);
%>
<% if(rows>0) {//삭제행이 있는 경우 %>
{"code":"success"}
<% } else {//삭제행이 없는 경우 %>
{"code":"error"}
<% } %>
덧글 삭제
