[JavaScript/jQuery] ajax 비동기통신 - html방식 리턴받기

안녕하세요! Plitche(플리체)입니다.
저의 첫 포스팅은 [jQuery] ajax 비동기 통신 - HTML방식으로 리턴 받기입니다.

Ajax와 Submit

일반적으로 form태그를 사용하여 submit 처리를 하게되면, back단에서 데이터 처리/로딩 후 페이지를 이동하는 방식으로 화면에 표출된다. 반면, Ajax 비동기통신을 이용하게 되면 새로고침을 하는 듯한 동작은 더 이상 볼 수 없다! Ajax 비동기통신을 이용하면 화면 이동 없이 back단에서 데이터를 처리한 후 return 값을 이용하여, 원하는 방식으로 웹 화면에 표출되는 내용을 제어가 가능하다.

Ajax의 return 타입은 datatype으로 핸들링이 가능하며 그 종류로는 xml, json, html 등등 다양하지만 오늘은 간단한 게시글을 작성하는 화면단을 구성하여 html타입에 대해서 다뤄 보려 한다.

기본 화면(jsp html code)

먼저! 클라이언트(사용자)에게 보여줄 boardInsert.jsp의 화면과 코드는 table태그를 이용하여 간단하게 구현하였다.

<input type="button" value="폼 추가" id="addForm">
<table border="1">
  <tr>
    <td>제목</td>
    <td>
      <input type="text" name="title"/>
    </td>
  </tr>
  <tr>
    <td>내용</td>
    <td>
      <input type="text" name="content"/>
    </td>
  </tr>
</table>

만약 여기서 사용자가 한 페이지에서 여러 개의 게시글을 작성하고 싶다면 어떻게 해야할까?

 

물론 미리 table을 넉넉하게 만들어두어 사용자에게 제공할 수도 있지만, 사용자가 한 번에 몇 개의 게시글을 작성하길 원하는지 알수 없기 때문에 미리 만들어놓은 table의 개수가 모자랄지 아니면 하나밖에 쓰이지 않고 나머지는 모두 빈칸으로 남을지도 모르는 일이다.

Ajax 통신을 활용하여 사용자가 원하는 개수 만큼의 form을 추가해 준다면, 편하게 위의 문제를 해결 할 수 있다.그 form을 추가하는 방법 중 한가지인 HTML방식을 아래에서 소개하려 한다.

jsp파일 준비

위의 boardInsert.jsp와 같은 모양의 table을 가지고 있는 addForm.jsp파일을 하나 만들어 둔다.

<table border="1">
  <tr>
    <td>제목</td>
    <td>
      <input type="text" name="title"/>
    </td>
  </tr>
  <tr>
    <td>내용</td>
    <td>
      <input type="text" name="content"/>
    </td>
  </tr>
</table>

javascript - ajax

기본적인 준비가 끝났으면, 스크립트에 클릭 이벤트를 이용하여 ajax를 실행한다.

$(document).ready(function(){
  $("#addForm").on("click",function(){    // 클릭 이벤트
    $.ajax({
        url : "addForm.do",
        dataType: "html",    // 이 부분이 반환 타입을 핸들링하는 곳이다.
        type: "get",
        success: function(data) {
          $('body').append(data); // 반환된 data를 body태그에 추가
        },
        error: function (){alert("실패");}
    });
  });
});

Controller

@RequestMapping(value="addForm.do") // Mapping값을 ajax의 url과 일치시킨다.
public String addFrom() {
  return "addForm"; // 미리 생성해 놓은 addForm.jsp 파일을 반환한다.
}

1. 위와 같이 ajax 통신을 실행시키고, url을 Controller의 Mapping값과 일치시킨다.
2. 통신의 결과(dataType)를 html타입으로 설정한다.
3. ajax가 성공 했을 때 작동할 success 부분에서 Controller에서 return해준 값을 body태그에 추가해준다.

• 위 순서를 통해 폼 추가 버튼을 클릭 할 때 마다 addForm.jsp의 내용을 받아와서 하나씩 추가해 주는 것이다.
  물론 각각 폼을 삭제해주거나 작성한 데이터를 넘기는 방법은 생각해야 한다.

view 결과

My thought

ajax 비동기통신을 이용하여 html타입으로 반환을 받게 되면, 위의 예제와 같이 동일한 폼을 가진 요소들을 반복해서 추가해 줄 때 손 쉽게 할 수 있다.

• 장점
  • json타입이나 xml타입으로도 가능하지만 선택자 및 append를 통한 하드 코딩을 하기 귀찮고 번거로울 수 있다.
  • return해 줄 jsp파일 자체를 수정하면 태그들이 눈에 보다 쉽게 다가와 유지/보수 하는데 훨신 편할 것 같다.
• 단점
  • 다른 방식과는 다르게 각각의 태그마다 특정 속성(ex. name, id 등)이나, 각각의 값을 다르게 주고 싶은 경우 쉽게 접근하기 어렵다는 개인적인 생각이다.