[jQuery] Ajax와 remove, append, after, val 메서드

Javascript만으로도 DOM을 조작할 수 있지만, jQuery를 사용하면 조금 더 간단하고 깔끔하게 마크업을 관리할 수 있습니다.

이 글은 jQuery를 사용하여 Ajax 호출 및 Ajax 호출의 결과로 DOM을 조작하는 방법에 대해 정리했습니다.

1. remove() - 링크

• remove() 메서드는 선택된 셀렉터 요소는 물론 자식 요소들까지 모두 제거합니다.

아래의 사진은 class 이름이 hello인 요소를 모두 제거하는 코드입니다.

2. append() - 링크

• A.append(B) 문법의 append 메서드는 A의 자식 요소에 B요소를 추가하는 역할을 합니다.
• 그런데 이미 A가 다른 어떤 자식을 갖고 있는 상태에서 append() 메서드를 호출하게 되면, B요소는 가 갖는 가장 마지막 자식 요소 뒤에 추가됩니다.

아래의 사진은 class이름이 inner인 요소의 자식 요소에 <p>Test</p> 요소를 추가하는 코드입니다.

3. after() - 링크 

• 셀렉터 요소의 형제 요소를 추가합니다.
• 아래 사진과 append()를 사용했던 바로 위의 사진을 비교해보면, after() 메서드는 자식이 아닌, 형제로써 요소로 추가합니다.
• 비슷한 메서드로 before() 메서드가 있습니다. ( 링크 )

4. val() - 링크   /   text() - 링크

• val()
• select, input, textarea 등의 셀렉터 요소 value 값을 가져오거나, 설정할 수 있습니다.
• 매개 변수로는 String, Number, Array, 함수 등을 전달할 수 있습니다.
• $(".someClass").val()
• $(".someClass").val("값을 설정합니다.")
• input, textarea, select 요소와 같이 value 값이 있는 요소의 값을 다루는데 사용합니다.
• text()
• 마찬가지로, val() 메서드처럼 셀렉터 요소의 text 값을 가져오거나, 설정할 수 있습니다.
• $(".someClass").text()
• $(".someClass").text("값을 설정합니다.")

• span, p, a 요소와 같이 태그 사이에 있는 text 값을 다루는데 사용합니다.

• 그러나 문법은 같지만 사용하는 방법이 다르므로, 두 메서드의 차이점을 구별하여 사용해야 합니다.

위 사진은 <input>의 value값을 <p>사이에 삽입하는 코드입니다.

5. Ajax 예제

위의 jQuery 메서드들을 활용하여 실제로 어떻게 활용할 수 있는지 살펴보도록 하겠습니다.

상황은 게시판에서 카테고리를 추가하고, 삭제할 때 Ajax를 사용한 부분입니다.

1) HTML ( JSP )

<table class="origin-table">
    <thead>
    <tr>
        <th>번호</th>
        <th>카테고리명</th>
        <th>포스트 수</th>
        <th>설명</th>
        <th>삭제</th>
    </tr>
    </thead>


    <tbody class="origin-tbody">
    <tr>
        <td>1</td>
        <td>Java</td>
        <td>10</td>
        <td>Jsp/Serr</td>
        <td>
            <img src="${pageContext.request.contextPath}/assets/images/delete.jpg" value="카테고리번호" class="delete-img">
        </td>
    </tr>
    </tbody>
</table>


<h4 class="n-c">새로운 카테고리 추가</h4>
<input type="hidden" id="blogNo" name="blogNo" value="${ blogVO.no}" >
<table>
    <tr>
        <td class="t">카테고리명</td>
        <td><input id="name-cate-form" type="text" name="name" required></td>
    </tr>
    <tr>
        <td class="t">설명</td>
        <td><input id="content-cate-form" type="text" name="content" required></td>
    </tr>
    <tr>
        <td class="s">&nbsp;</td>
        <td><input class="form-btn" type="submit" value="카테고리 추가"></td>
    </tr>
</table>

• 카테고리 목록을 보여주는 table과 카테고리 추가 table이 있습니다.
• ${ } 부분은 JSP의 JSTL을 사용한 부분인데, 특정 언어에 맞춰 설명하는게 조금 아쉽지만, JSP 코드는 무시하셔도 됩니다.
• 이 화면에서 "카테고리 추가" 버튼을 누르면, 입력 데이터들이 Ajax 통신을 통해 서버로 전달이 되며, 카테고리 목록 테이블의 <tbody> 부분이 사라지고 새롭게 추가된 카테고리와 함께 <tbody>가 다시 생성되게 하려고 합니다.

2. jQuery

// ajax로 생성되는 테이블에서 클릭 이벤트 rebinding을 위해
// $(".delete-img").click(function(){}) 을 하지 않음
$(document).on("click", ".delete-img", function(){
  let categoryNo = $(this).attr("value")
  let imgObj = $(this);

  $.ajax({
    url: "${ pageContext.request.contextPath }/category/delete?no=${ blogVO.no }&categoryNo=" + categoryNo,
    type: "POST",
    data: {},
    dataType: "json",
    success: function( result ){
      if( result ){
        // 삭제 버튼을 누른 row 제거
        $(imgObj).parent().parent().remove();
      }
    },
    error: function( err ){
      console.log(err)
    }
  })
})


$(".form-btn").click(function(){
  $.ajax({
    url: "${pageContext.request.contextPath}/category",
    type: "POST",
    data: {
      "blogNo": $("#blogNo").val(),
      "name": $("#name-cate-form").val(),
      "content": $("#content-cate-form").val()
    },
    dataType: "json",
    success: function( categoryList ){
      removeTable();
      createNewTable(categoryList);
    },
    error: function( err ){
      console.log(err)
    }
  })
})


function removeTable(){
  // 원래 테이블 제거
  $(".origin-tbody").remove();
  // ajax로 추가했던 테이블 제거
  $(".new-tbody").remove();
  // 입력 form 초기화
  $("#name-cate-form").val("");
  $("#content-cate-form").val("");
}


function createNewTable(categoryList){
  $newTbody = $("<tbody class='new-tbody'></tbody>")
  $(".origin-table").append($newTbody)

  for(let category of categoryList){
    let $cellsOfRow = $("<tr>" +
        "<td>" + category.no + "</td>" +
        "<td>" + category.name + "</td>" +
        "<td>" + category.postCount + "</td>" +
        "<td>" + category.content + "</td>" +
        "<td>" +
        "<img src='${pageContext.request.contextPath}/assets/images/delete.jpg'" +
        "class='delete-img' value='"+ category.no + "'>" +
        "</td>" +
        "</tr>");
    $newTbody.append($cellsOfRow);
  }
}

• jQuery로 Ajax를 사용하는 부분은 공식 문서에도 잘 나와 있으니 여기를 참고해주세요.
• 삭제 이미지( delete-img )를 클릭했을 때, 삭제 버튼이 속해있는 하나의 row를 삭제합니다.
• 삭제버튼의 parent는 <td>이고, <td>의 parent는 <tr> 이므로 remove()를 호출했을 때 <tr>이 삭제됩니다.
• "새로운 카테고리 추가"에서 입력 값을 작성한 후, "카테고리 추가" 버튼( form-btn )을 누르면, 원래 테이블의 <tbody>, ajax로 추가한 테이블 <tbody>, 그리고 <input> 태그를 초기화 합니다.
• 그리고 나서 서버로부터 새로 추가한 "카테고리 리스트( categoryList )"를 통해 <tbody class="new-tbody">를 생성한 후, 반복문을 돌면서 row를 추가하게 됩니다.
• 주의 할 점은 이렇게 기존 tbody( origin-tbody )를 삭제하고, 새롭게 tbody( new-tbody )를 추가하게 되면, event bindind이 되지 않습니다.
• 예를 들어, 삭제를 할 때 $(document).on("click", ".delete-img", function(){ ... })가 아닌 $(".delete-img").click(function(){ ... }) 방식으로 삭제를 하게 될 경우, new-tbody에서 생성된 삭제 버튼이 작동하지 않을 것입니다.
• 이렇게 동적으로 추가한 요소는 event가 unbinding되어 있기 때문에, event를 rebinding 해야 합니다. 어떤 원리인지 궁금하시다면 여기를 참고해주세요.
• 위 예제에서는 $(document).on("click", ".delete-img", function(){ ... }) 으로 코드를 작성하여 rebinding을 해결 했습니다.

이상으로 Ajax를 사용할 때 자주 사용되는 jQuery 메서드와 자주 사용되는 Ajax 활용법에 대해 알아보았습니다.

Ajax는 자주 사용되므로 어떤 식으로 작성을 해야 하는지 흐름을 잡는 것이 중요합니다.