국비 교육 88일차 - ajax이용 댓글창 띄우기

ajax로 댓글창을 띄우려면 먼저 detail 페이지에서 띄울 공간을 먼저 셋팅해준다

 

<div style="height: 30px"></div>
    <div class="row" id="reply_data">
    
    </div>
    </div>

 

그리고 detail에서 get 방식으로 게시물 번호와 페이지 정보를 보내주기 위해 위에 스크립트로 이렇게 작성한다

 

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
	// 파일 읽기 (Ajax) => 자바스크립트에서 자바의 데이터를 출력 할 경우 => Jquery, EL => $를 쓰면 안됨 => 그래프
	$.ajax({
		type:'GET',
		url:'reply_list.do',
		data:{"bno":<c:out value="${vo.no}"/>, "page":<c:out value="${page}"/>}, 
		success:function(result)
		{
			$('#reply_data').html(result);
		}
	});
})
</script>

 

controller에서 reply_list.do를 받으면 아래와 같이 실행된다

 

@GetMapping("board/reply_list.do")
   // board/reply_list.do?bno=1&page=2
   public String board_reply_list(int bno,int page,Model model)
   {
	   List<ReplyVO> rList=service.replyListData(bno);
	   model.addAttribute("page", page);
	   model.addAttribute("rList", rList);
	   model.addAttribute("no", bno);
	   return "board/reply_list";
   }

 

그냥 댓글이 출력되는 코드

 <td class="text-left">
           <c:if test="${rvo.group_tab>0 }">
             <c:forEach var="i" begin="1" end="${rvo.group_tab }">
               &nbsp;&nbsp;
             </c:forEach>
             <img src="re_icon.png">
           </c:if>
                       ◐${rvo.name }(${rvo.dbday })
          </td>

 group_tab 있는지 따져주고 있으면 공백과 아이콘을 추가해준다

 

<c:if test="${sessionScope.id!=null }">
              <c:if test="${sessionScope.id==rvo.id }">
                <span class="btn btn-xs btn-success updateBtn" data-no="${rvo.no }">수정</span>
                <span data-no="${rvo.no }" data-bno="${no}" data-page="${page}" class="btn btn-xs btn-info delBtn">삭제</span>
                
              </c:if>
              <span class="btn btn-xs btn-danger insertBtn" data-no="${rvo.no }">댓글</span>
            </c:if>

 세션에 아이디가 있고, 아이디가 작성자 아이디와 같을때 수정, 삭제 버튼이 보이도록 만든다. 

아이디가 있지만 같지 않을 경우에는 대댓글을 달 수 있도록 한다

 

 

그리고 마지막에 댓글 내용을 출력한다.

 <td colspan="2">
            <c:if test="${rvo.group_tab>0 }">
             <c:forEach var="i" begin="1" end="${rvo.group_tab }">
               &nbsp;&nbsp;
             </c:forEach>
            </c:if>
            <pre style="white-space: pre-wrap;border:none;background-color:white;">${rvo.msg }</pre>
          </td>

 

 <%--수정 데이터 --%>
           <tr class="updates" style="display:none" id="m${rvo.no }">
	         <td class="text-center" colspan="2">
	           <input type="hidden" name=no value="${rvo.no }" id="update_no${rvo.no }">
	           <input type="hidden" name=bno value="${no }" id="update_bno${rvo.no }">
	           <input type="hidden" name=page value="${page }" id="update_page${rvo.no }">
	           <textarea rows="4" cols="95" name="msg" style="float: left" id="update_msg${rvo.no }">${rvo.msg }</textarea>
	           <button class="btn btn-sm btn-primary uBtn" style="height: 80px;float:left"
	            data-no="${rvo.no }"
	           >댓글수정</button>
	         </td>
	        </tr>
	     <%-- 댓글올리기 --%>
	       <tr class="inserts" style="display:none" id="in${rvo.no }">
	         <td class="text-center" colspan="2">
	          <!-- <form method="post" action="reply_to_reply_insert.do"> -->
	           <input type="hidden" name=pno value="${rvo.no }" id="rr_insert_pno${rvo.no }">
	           <input type="hidden" name=bno value="${no }" id="rr_insert_bno${rvo.no }">
	           <input type="hidden" name=page value="${page }" id="rr_insert_page${rvo.no }">
	           <textarea rows="4" cols="95" name="msg" style="float: left" id="rr_insert_msg${rvo.no }"></textarea>
	           <input type=button class="btn btn-sm btn-primary rrBtn" style="height: 80px;float:left"
	             value=댓글 data-no="${rvo.no }">
	          <!-- </form> -->

 수정과 댓글 올리기 보면 input type=hidden으로 필요한 정보들을 다 전달하고 있다. 

그리고 처음에는 수정 데이터가 보이면 안되기 때문에 display:none으로 맞춰 놓고, 위에서 ajax를 통해 조절해준다. 

 

 

$('.updateBtn').click(function(){
		$('.updates').hide();
		$('.inserts').hide();
		let no=$(this).attr("data-no");
		if(u==0)
		{
			$('#m'+no).show();
			$(this).text("취소");
			u=1;
		}
		else
		{
			$('#m'+no).hide();
			$(this).text("수정");
			u=0;
		}
	})

 

수정 버튼을 누르면 일단 나머지 창들을 모두 숨겨준다. 그리고 data-no에 있는 댓글 번호를 no 변수에 담아 준다. 

 

그 다음에 만약 u==0이면, (위에서 0으로 초기화 해뒀다) m+no 즉 수정 할 데이터를 보여주고, 버튼 value는 '취소'로 바꿔준다. 아니라면 수정창을 숨기고 버튼의 value는 다시 '수정'으로 바꿔준다. 

 

$('.uBtn').click(function(){
		let data_no=$(this).attr("data-no");
		let no=$('#update_no'+data_no).val();
		let bno=$('#update_bno'+data_no).val();
		let page=$('#update_page'+data_no).val();
		let msg=$('#update_msg'+data_no).val();
		if(msg.trim()=="")
		{
			$('#update_msg'+data_no).focus();
			return;
		}
		$.ajax({
			type:'post',
			url:'reply_update.do',
			data:{"no":no,"bno":bno,"page":page,"msg":msg},
			success:function(result)
			{
				$('#reply_data').html(result);
			}
		})
	})

 그리고 수정창에서 입력받은 값을 변수에 저장을 해주고, post방식으로 넘겨준다. 

 

 @PostMapping("board/reply_update.do")
   public String board_reply_update(int no,int bno,int page,String msg,RedirectAttributes ra)
   {
	   // 수정 => DAO
	   ReplyVO vo=new ReplyVO();
	   vo.setNo(no);
	   vo.setMsg(msg);
	   service.replyUpdate(vo);
	   // 수정 후에 데이터를 보내준다 
	   ra.addAttribute("bno",bno);
	   ra.addAttribute("page",page);
	   return "redirect:reply_list.do";
   }

Controller에서 이렇게 처리를 해주고 다시 redirect를 통해 원래 페이지로 넘어가면 댓글이 수정된 것을 바로 확인 할 수 있다. 

 

 <span data-no="${rvo.no }" data-bno="${no}" data-page="${page}" class="btn btn-xs btn-info delBtn">삭제</span>

 댓글 삭제는 조금더 간단하다. 

 

$('.delBtn').click(function(){
		
		let no=$(this).attr("data-no");
		let bno=$(this).attr("data-bno");
		let page=$(this).attr("data-page");
		$.ajax({
			type:'get',
			url:'reply_delete.do',
			data:{"no":no,"bno":bno,"page":page},
			success:function(result)
			{
				$('#reply_data').html(result);
			}
		})
	})

 댓글 번호, 글번호, 페이지를 변수로 넘겨주고 지워진 화면을 다시 띄워준다. 

 

이제 이걸 활용해서.. 나도 프로젝트에 적용할 수 있어야 하는데 생각보다 ajax가 어렵게 느껴져서 큰일이다 ㅠㅠ