카테고리 없음

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;		
	}

Gson gson= new GsonBuilder().setDateFormat("yyyy-MM-dd HH:MM").create(); //날짜 형식 변경