댓글 등록
<input type="hidden" name="refBoardNo" value="${board.boardNo }">
<table align="center" width="500" border="1">
<tr>
<td><textarea rows="3" cols="55" placeholder="내용을 작성하세요"
name="replyContents" id="replyContents" required="required"></textarea></td>
<td>
<button id="rSubmit">등록하기</button>
</td>
</tr>
</table>$('#rSubmit').on("click", function() {
var replyContents = $("#replyContents").val();
var refBoradNo = "${board.boardNo}"
$.ajax({
url : "/board/replyAdd.kh",
data : {
"replyContents" : replyContents,
"refBoardNo" : refBoradNo
},
type : "post",
success : function(result) {
if (result == "success") {
alert("등록성공")
}
$('#replyContents').val('') //댓글 등록시 댓글 등록창 초기화
getReplyList(); //등록후 댓글 목록 불러오기 함수 실행
//DOM 조작 함수호츨 등 가능
},
error : function() {
alert("등록 실패")
}
})
})- 버튼을 누르면 replyContents의 내용과 boardNo가 전송되며 전송받은 값을 처리하여 반환받으면 등록성공이라는 메세지가 뜬다.
- 그 이후
$('#replyContents').val('')를 통해 replyContens 영역에 값을 지워 초기화 하고getReplyList();를 실행해 댓글 목록을 불러들인다.
댓글출력
<table align="center" width="500" border="1" id="rtb">
<thead>
<td colspan="4"><b id="rCount">댓글목록</b></td>
</thead>
<tbody>
</tbody>
function getReplyList() {
var board = "${board.boardNo}";
$.ajax({
url : "/board/replyList.kh",
data : {
"boardNo" : board
},
type : "get",
success : function(result) { //댓글목록 불러오는 함수
var $tableBody = $('#rtb tbody'); //$는 의미없음 그냥 변수명 중 하나
$tableBody.html(''); //tbody를 초기화 시켜야 댓글 목록의 중첩을 막을수 있음 아니면 등록할떄마다 append로 이어짐
$('#rCount').text("댓글 ("+result.length+")") //댓글수 출력
if (result != null) {
console.log(result);
for ( var i in result) {
var $tr = $("<tr>");
var $rWriter = $("<td width='100'>").text(
result[i].replyWirter);
var $rContent = $("<td>").text(
result[i].replyContents);
var $rCreatDate = $("<td width='100'>").text(
result[i].rCreateDate);
var $btnArea = $("<td width='80'>").append(
"<a href='modifyreply(${board.boardNo})'>수정</a>").append(
"<a href='#'>삭제</a>");
$tr.append($rWriter);
$tr.append($rContent);
$tr.append($rCreatDate);
$tr.append($btnArea);
$tableBody.append($tr);
}
}
},
error : function() {
console.log("요청실패");
}
})
}
- 해당 함수로 댓글 목록을 출력한다,
var $tableBody = $('#rtb tbody'); for ( var i in result) { var $tr = $("<tr>"); var $rWriter = $("<td width='100'>").text( result[i].replyWirter); var $rContent = $("<td>").text( result[i].replyContents); var $rCreatDate = $("<td width='100'>").text( result[i].rCreateDate); var $btnArea = $("<td width='80'>").append( "<a href='modifyreply(${board.boardNo})'>수정</a>").append( "<a href='#'>삭제</a>"); $tr.append($rWriter); $tr.append($rContent); $tr.append($rCreatDate); $tr.append($btnArea); $tableBody.append($tr); }
.append를 활용해 해당변수에 저장된 태그를 계속 tr변수에 더하여 해당 tbody태그 아래에 더해질수 있도록 만든다.
- 해당함수가 실행될때는 목록창을 초기화 하여 목록창이 중첩되지 않도록 한다.
$tableBody.html('');
Controller
@ResponseBody
@RequestMapping(value = "/board/replyList.kh", produces = "application/json;charset=utf-8", method = RequestMethod.GET)
public String boardReplyList(@RequestParam("boardNo") int boardNo) {
int bno = (boardNo == 0) ? 1 : boardNo;
List<Reply> rList = bService.PrintAllReply(bno);
if (!rList.isEmpty()) {
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
return gson.toJson(rList);
}
return null;
}json으로 만든 날짜 정상 출력하기
- 날짜 출력을 정상적으로 하기 위해
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();코드를 사용하였다.
응용하여 댓글 수정창 만들기
- 굉장히 해매었다,
- 이미 댓글리스트를 가지고 왔으니 그 리스트의 값으로 수정창을 만들수있을줄알았는데 그렇지 않았다…
- 결국 컨트롤러영역에서 해당 댓글의 내용과 댓글번호를 가지고 오기로 했다…
- 좀더 편한 방법이 있을지도 모르겠다.. 복잡하더라도 해냈다는데 의의를 둬본다
html영역
- 앞서 만들었던 댓글 영역에 함수를 연결했다.
<button onclick='modifyreply("+result[i].replyNo+")'>수정</button>function modifyreply(rNo) {
$.ajax({
url : "/board/replyModi.kh",
data : {
"replyNo" : rNo,
},
type : "get",
success : function(result) {
var $td = $("<td colspan='3'>");
var $textarea= "<textarea rows='3' cols='55' placeholder='내용을 작성하세요' name='replyContents' id='replyContents"+rNo+"' required='required'>"
+result.rContents+"</textarea>"
var apTd = "<td><button onclick='modifyDo("+rNo+")'>수정하기</button> "
$td.html($textarea)
console.log(result.rContents);
$('#'+rNo).html(''); //현재 댓글 출력창의 tr부분을 비운다
$('#'+rNo).append($td).append(apTd); //비워진 tr에 td와 apTd를 넣어 수정창으로 바꾼다
},
error : function() {
alert("등록 실패")
}
})
}- ajax를 활용해 입력받은 댓글번호로 컨트롤러 창을 연결해 댓글을 가져왔다
success : function(result)의 result가 해당 댓글번호의 도매인값이다
- 댓글을 불러오는것에 성공한경우 변수에 각 태그를 텍스트로 저장하여 해당 댓글영역에 내용을 html(’’)로 비우고 append를 이용하여 추가했다.
- 해당댓글영역은 댓글을 출력할때 tr부분에 댓글번호를 id로 만들어 특정하기 쉽게 하였다,
var $tr = $("<tr id="+result[i].replyNo+">");
Controller
@ResponseBody
@RequestMapping(value = "/board/replyModi.kh", produces = "application/json;charset=utf-8", method = RequestMethod.GET)
public String selectOneReply(@RequestParam("replyNo") int replyNo) {
Reply reply = bService.printOneReply(replyNo);
JSONObject jsonObj = new JSONObject();
jsonObj.put("rContents",reply.getReplyContents());
return jsonObj.toString();
}- 컨트롤러 영역에서 해당 댓글번호로 댓글클래스의 객체를 가져와 json에 넣어주어 반환하였다,
- 이부분은 특별할것 없었다. 댓글창을 만드는 그 자체가 어려웠다,
- 자바스크립트로 태그를 추가하는건 언제해도 너무 어려운것 같다
Ajax로 댓글 수정하기
- 수정창을 만들었으니 이제 댓글을 수정해야지
function modifyDo(rNo){
var replyContents = $('#replyContents'+rNo).val();
$.ajax({
url : "/board/modifireply.do",
data : {
"replyContents" : replyContents,
"replyNo" : rNo
},
type : "post",
success : function(result) {
if (result == "success") {
alert("등록성공")
}
getReplyList(); //등록후 댓글 목록 불러오기 함수 실행
//DOM 조작 함수호츨 등 가능
},
error : function() {
alert("등록 실패")
}
})
}- 수정하기 버튼을 누르면 연결되는 함수이다.
- 수정작업에 필요한것은 1. 댓글번호 2. 댓글 내용이다.
- 댓글번호는 함수에 같이 보냈고 댓글내용은
var replyContents = $('#replyContents'+rNo).val();로 정의해주었다,
- 댓글번호는 함수에 같이 보냈고 댓글내용은
- 이미 해당 매소드가 controller에 존재했기때문에 data로 넘긴값을 해당 도메인클래스에 객체로 저장해준것 말고는 특별히 할것이 없었다.
- 무사히 완료! getReplyList();를 실행해주니 무리 없이 댓글창만이 새로고침되어 수정한 댓글이 반영되었다.
hello world