[1일1코딩][Web] boardDetailView 6th 댓글 script part(댓글 ajax)

ajax(jQuery) 댓글 파트

쓴 댓글 쓴거 db 저장하고

또 쓴 댓그 내용 읽어오기

 

오랫만에 써서 로직 파악도 시간이 좀 걸렸고

그래서 글써서 등록하는 부분에서 내용 가져오고 

var rContent 변수에 넣고, 어떤 게시글에 댓글 다는지 알려주고 저장해야하니 boardId도 같이 컨트롤러에 보내줘서 댓글 등록하고

댓글 읽어오는게 좀 복잡한데

읽어올 보드id 보내서 댓글 받아오면, 받아온 댓글 창을 생성까지 해줘야한다. 왜냐하면 없는 댓글의 창을 미리 만들어두는 것도 모양이 이상하게 몇개가 달릴지도 모르기 때문

댓글이 몇개일지 모르니 받아온 데이터 길이만큼 일단 for in문 돌려주고, 여기서 직접 선언한 변수들 안에 테이블 생성하고

작성자, 내용을 td에 넣어서 변수(tr,writer, content,date)에 넣어주고 이들을 다시 append()메소드로 tr에 추가하고 tr을 다시 tableBody에 넣어서 아래 달린 댓글창 전체를 만들어준다. 

 

	
	<script>
		// 댓글 등록 : jQuery ajax
		$('#rSubmit').click(function(){
			var rContent = $('#replyContent').val();
			var refBId = ${board.boardId};
			
			$.ajax({
				url:'addReply.bo',
				data:{replyContent:rContent, refBoardId:refId},
				success:function(data){
					if(data == 'success'){
						console.log(data);
						$('#replyContent').val(' ');
					}
				},
				error:function(data){
					console.log(data);
				}
				
			});
		});	
			
			
		// 등록한 댓글 읽어오기
		function getReplyList(){
			$.ajax({
				url:'rList.bo',
				data:{bId:${board.boardId}},
				success:function(data){
					console.log(data);
					
					// 계속 이어붙기 때문에 공백 넣어줘야함
					$tableBody = $('#rtb tbody');
					$tableBody.html('');
					
					// 변수선언
					var $tr;
					var $writer;
					var $content;
					var $date;
					$('#rCount').text('댓글('+data.length+')'); // 댓글(1) 알려주는 출력문구
					
					if(data.length > 0){
						for(var i in data){
							$tr = $('<tr>'); 	// 위에서 선언한 변수 var $tr;에서 다시 가져다 쓰므로 var 빠지고 $tr만
							$writer = $('<td>').css('width','100px').text(data[i].nickName);
							$content = $('<td>').text(data[i].replyContent);
							$date =  $('<td width="100px">').text(data[i].replyCreateDate);
							
							$tr.append($writer);
							$tr.append($content);
							$tr.append($date);
							$tableBody($tr);
						}
					}else{
						$tr = $('<tr>');
						$content = $('<td colspan="3">').text('등록된 댓글이 없습니다.');
						
						$tr.append($content);
						$tableBody.append($tr);
					}
				},
				error:function(data){
					console.log(data);
				}
			});
		}
		

		// 다른 사람이 쓴 댓글도 볼 수 있게 5초마다 읽어오도록
		$(function(){
			getReplyList();
			
			setInterval(function(){
				getReplyList();
			}, 5000);
		})
		
		
	</script>