240124 HTML 홈페이지 만들기

댓글 작성 버튼을 만들어서

버튼 클릭 시 작성 창 나타나게 하기

  // 댓글 쓰기 버튼을 누르면 댓글창 나오게 하기
  $(".comment-write").hide(); // 페이지가 접속되자마자 숨겨져야 해서 ready 바로 아래가 좋음
  // $(".comment-write").show(5000);
  
  $(".xi-comment-o").click(function() {
    $(".xi-comment-o").hide();
    // $(".comment-write").show();
    $(".comment-write").slideToggle('slow');
  });

 

댓글 삭제 시 페이지 새로고침이 아닌 해당 댓글만 삭제되게 하기 AJAX 이용

onclick="commentDel(${comm.cno})"

 

 

 

댓글 창 중 해당 부분을 지우고 class 작성

 

<img alt="삭제" src="./image/delete.png" class="commentDelete" />

 

만약 class 대신에 id 로 작성할 경우 댓글 중 하나만 버튼이 작동되고 나머지는 작동이 안됨

-> 왜일까 신기해

 

  // 댓글 삭제 버튼 클릭 시
  $(".commentDelete").click(function(){
    // 부모 객체 찾아가기 -> this, super 의 이해
    // let text = $(this).parent(".cname").css("color", "green"); // $() 의 나 자신.부모("부모이름")
    let text = $(this).parent(".cname").text();
    // html() 은 해당 class 안의 html 내용, val() 은 value 로 지정된 값
    // text() 는 해당 class 안에 들어있는 값 추출
    
    // 부모 요소 아래의 자식 요소 찾기 children()
    let cno = $(this).parent(".cname").children(".cno").val();
    
    // 형제 요소 찾기, .siblings() .prev() 바로 이전, .next() 바로 다음
    // let no = $(this).siblings(".cno").val();
    let no = $(this).prev(".cno").val();
    
    // ajax
    $.ajax({
      url : "./commentDel", // 주소
      type : "post", // get or post
      dateType : "text", // 수신 타입
      data : {no:cno}, // 보낼 값
      success : function(result){
        alert("서버에서 온 값 : " + result);
      },
      error : function(request, status, error){
        alert("문제 발생");
      }
    }); // end ajax
  });

 

commentDel 서블릿에서  기존에 사용하던 get 을 그대로 가져옴

post 에서 작성하기

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("요청이 들어옴 : " + request.getParameter("no"));
    int result = 0;
    HttpSession session = request.getSession();
    if (session.getAttribute("mid") != null
        // && request.getParameter("no") != null
        && Util.intCheck2(request.getParameter("no"))) {
      CommentDTO dto = new CommentDTO();

      dto.setMid((String) session.getAttribute("mid"));
      dto.setCno(Util.str2Int(request.getParameter("no")));

      CommentDAO dao = new CommentDAO();
      result = dao.commentDelete(dto);
    }
    PrintWriter pw = response.getWriter();
    pw.print(result);
  }

 

해서 ajax 를 이용하여 댓글 삭제 시 DAO 실행과 함께 화면에서도 삭제

  $(".commentDelete").click(function(){
    if (confirm("댓글 삭제")) {
    // 부모 객체 찾아가기 -> this, super 의 이해
    // let text = $(this).parent(".cname").css("color", "green"); // $() 의 나 자신.부모("부모이름")
    let text = $(this).parent(".cname").text();
    // html() 은 해당 class 안의 html 내용, val() 은 value 로 지정된 값
    // text() 는 해당 class 안에 들어있는 값 추출
    
    // 부모 요소 아래의 자식 요소 찾기 children()
    let cno = $(this).parent(".cname").children(".cno").val();
    
    // 형제 요소 찾기, .siblings() .prev() 바로 이전, .next() 바로 다음
    // let no = $(this).siblings(".cno").val();
    let no = $(this).prev(".cno").val();
    
    // ajax
    let temp = $(this).closest(".comment");
    $.ajax({
      url : "./commentDel", // 주소
      type : "post", // get or post
      dateType : "text", // 수신 타입
      data : {no:cno}, // 보낼 값, no 라는 이름으로 cno 를 보냄
      success : function(result){ // 0, 1 값이 돌아옴
        // alert("서버에서 온 값 : " + result);
        if (result == 1) {
          // 정상 삭제 : this 의 부모를 찾아 remove 진행 -> 댓글 하나 칸 전체 삭제
          // parent(), parents(), closest()
          temp.remove();
        } else { // 삭제 안됨
          alert("삭제할 수 없음");
        }
      },
      error : function(request, status, error){
        alert("문제 발생");
      }
    }); // end ajax
    }

 

이제 댓글 수정하기

똑같이 onclick 을 class 명으로 변경해