카테고리 없음
ajax 2일차 : 댓글 리스트출력. 날짜형식변경
나이많은 초보
2022. 10. 5. 14:38
<table align="center" width="500" border="1" id="rtb">
<%-- <c:forEach items="${rList }" var="reply">
<tr>
<td width="100">${reply.replyWriter }</td>
<td>${reply.replyContents }</td>
<td colspan="2">${reply.rUpdateDate }</td>
<td>
<a href="#" onclick="modifyView(this,'${reply.replyContents }', ${reply.refBoardNo },${board.boardNo },${page });">수정</a>
<!-- /reply.replyNo 숫자라서 그냥 넣은것이다./ -->
<a href="#" onclick="removeReply(${reply.replyNo })";>삭제</a>
</td>
</tr>
<tr id="remo" style="display:none;">
<td colspan="3"><input type="text" size="50" value="${reply.replyContents }"></td>
<td><button>수정</button></td>
</tr>
</c:forEach> --%>
<thead>
<tr>
<td colspan="4"><b id="rCount"></b></td>
<!-- 댓글 갯수 나오는곳 -->
</tr>
</thead>
<tbody>
</tbody>
</table>
forEach 삭제하구 구문변경 한다....html에서의 기재사항이 적어진다.
getReplyList();// 댓글 리스트를 언제든지 가져올수 있도록 앞선 실행요청
//댓글목록 출력
function getReplyList(){
var boardNo="${board.boardNo }";
$.ajax({
url:"/board/replyList.kh",
data:{
"boardNo":boardNo
},
type:"get",
success:function(rList){
var $tableBody=$("#rtb tbody");
$tableBody.html(''); //댓글 List 누적되지 않게 초기화
$("#rCount").text("댓글 갯수( " +rList.length+")"); //댓글 갯수구하기...
if(rList !=null){
for(var i in rList){
var $tr=$("<tr>");
var $rWriter=$("<td width='100'>").text(rList[i].replyWriter);
var $rContent=$("<td>").text(rList[i].replyContents);
var $rCreateDate=$("<td width='200'>").text(rList[i].rCreateDate);
var $btnArea=$("<td width='100'>").append("<button><a href='#'>수정</a></button>")
.append("<button><a href='#'>삭제</a></button>");
$tr.append($rWriter);
$tr.append($rContent);
$tr.append($rCreateDate);
$tr.append($btnArea);
$tableBody.append($tr);
}
}
},
error:function(){
alert("ajax 통신실패!관리자에게 문의하세요!!")
}
});
}
리스트를 ajax으로 받는데 계속 변경될수 있도록 앞서 계속 호출하는것
등록할때마다 리스트가 출력되도록 등록 칸에도 메소드명을 적어준다.
리스트가 누적되어 출력되지 않도록 칸 비워주기도 잊지말기!!
//댓글 등록
$("#rSubmit").on("click",function(){
var replyContents=$("#replyContents").val();
var refBoardNo="${board.boardNo }";
$.ajax({
url : "/board/replyAdd.kh",
data:{
"refBoardNo" :refBoardNo,
"replyContents":replyContents,
},
type:"post",
success:function(data){
if(data=="success"){
alert("댓글등록완료");
}else{
alert("댓글등록실패");
};
getReplyList(); //댓글 등록 완료하면 리스트 출력
},
error:function(){
alert("에러");
}
});
})
//댓글목록 출력 - Ajax 버전!!
@ResponseBody
@RequestMapping(value="/board/replyList.kh",
produces = "application/json;charset=utf-8",
method=RequestMethod.GET)
public String boardReplyList(
@RequestParam("boardNo") Integer boardNo) {
int bNo=(boardNo==0)?1:boardNo;
List<Reply> rList=bService.printAllReply(bNo);
if(!rList.isEmpty()) {
Gson gson= new GsonBuilder().setDateFormat("yyyy-MM-dd HH:MM").create(); //날자 형식 변경
return gson.toJson(rList);
}
return null;
}