게시판 댓글 등록 AJAX 처리

1.JSP

<div class="input-group">
	<c:choose>
		<c:when test="${not empty member_no}">
			<textarea class="form-control" id="fBoardCmt" rows="2" name="fBoardCmt"></textarea>
			<span class="input-group-btn">
				<button class="button" type="button" id="commentInsertBtn">등록</button>
			</span>
		</c:when>
		<c:otherwise>
			<textarea class="form-control" id="fBoardCmt" rows="2" name="fBoardCmt" placeholder="회원만 댓글을 등록할 수 있습니다." disabled></textarea>
			<span class="input-group-btn"></span>
		</c:otherwise>
	</c:choose>
</div>

• 댓글을 등록하는 부분이다. 로그인 / 비로그인 여부에 따라 등록 버튼이 다르게 보여진다.
• 로그인하지 않은 유저라면 댓글 등록이 불가능하도록 처리

$("#commentInsertBtn").click(function() {
	var bNo = ${BoardView.FBOARD_NO};	
	var cmtContent = $("#fBoardCmt").val();
	if( cmtContent == "") {
		alert("댓글 내용을 입력해주세요.");
		return false;
	}
					
	$.ajax({				
		type:"POST",
		url:"/Board/cmtInsert",
		dataType: "html",
		data : {BoardNo: bNo, commtContent: cmtContent},
		success : function(){
			console.log('[댓글 등록] AJAX 전송 성공!');
			pagingAjax(pageNo, BoardNo);
			$("#fBoardCmt").val('');
		} 
	}) // end ajax
}) // end Insert

• 댓글 등록버튼 클릭시 호출되는 함수
• 댓글을 등록할 게시글 번호와, 댓글 내용을 파라미터로 서버에 전달한다.
• 댓글 등록시에 페이지가 깜빡이지 않도록 ajax로 요청한다.

2. Controller

@RequestMapping(value="/Board/cmtInsert", method=RequestMethod.POST)
	public String cmtInsert(int BoardNo, String commtContent, HttpSession session, Model model) {
		
		Commt commt = new Commt();
		commt.setfBoardNo(fBoardNo);
		commt.setCommtContent(commtContent);
		commt.setMemberNo( (int)session.getAttribute("member_no") );
		BoardService.insertCmt(commt);
		
		return "/Board/cmtListAjax";
		
	}

• 화면단에서 보내준 게시글 번호, 댓글 내용과 session에서 회원번호를 받아와 댓글vo에 저장
• 서비스단에는 dao로 넘겨주는 메소드만 작성하면 된다.
  
  
  3. 댓글 리스트 JSP

	<c:forEach items="${fBaordCmt }" var="cmtList">
			<div class="cmt_box" id="cont${cmtList.COMMT_NO }">
				<strong class="cmt_writer">${cmtList.MEMBER_NICK }</strong>
				<div class="cmt_cont_box">
					<div class="cmt_cont">${cmtList.COMMT_CONTENT }</div>
				</div>
				<p class="cmt_date">
					<fmt:formatDate value="${cmtList.COMMT_DATE }"
						pattern="yy-MM-dd HH:mm:ss" />
				</p>
				<c:if test="${member_no eq cmtList.MEMBER_NO }">
					<a class="miniBtn"
						onclick="cmtUpdate(${cmtList.COMMT_NO}, '${cmtList.COMMT_CONTENT }', '${cmtList.MEMBER_NICK }')">수정</a>
					<a class="miniBtn" onclick="cmtDelete(${cmtList.COMMT_NO})">삭제</a>
				</c:if>
			</div>
		</c:forEach>

• JSTL 반복문을 이용하여 댓글 리스트를 출력한다.