Button 태그 안 쓰고 post로 보내기

일반적으로 form 태그 안의 button 태그를 이용해 form 안의 내용을 post 방식으로 보내는 경우가 흔하다. 그런데 꼭 form, button 태그를 사용하지 않아도 클릭 시 post 방식으로 이동하는 것이 가능하다.

• 클릭 했을 때 로그아웃 할 수 있는 버튼을 만든다고 하자. 일반적인 form, button 태그를 이용한 방식은 아래와 같다.
• 참고: 글쓴이는 Spring Security를 이용해 세션을 처리하므로 sec 코드가 들어있다.

<form action="${  pageContext.request.contextPath   }/joinus/logout.do" method="post">                     
[<sec:authentication property="principal.username"/>] 님
<input type="hidden" name="${_csrf.parameterName }" value="${_csrf.token }">
<a><button name="logout" id="logout">로그아웃</button></a>
</form> 

• 이를 a href 태그를 이용해 표현한다면 아래와 같이 표현할 수 있다.

<a href="/joinus/logout.do" name="logout" id="logout">로그아웃</a> 

• 여기에 아래와 같이 Script 태그를 추가하면 form, button 태그를 이용한 것과 같은 결과를 기대할 수 있다.

	<script>
	$(document).ready(function() {
		  $('#logout').click(function(event) {
		    event.preventDefault();
	//a 태그의 기본 전송방식이 get이기 때문에 방지하고자 preventDefault
		    logout();
		  });
	
  function logout() {
	    var form = $('<form>').attr({
	        action: "${pageContext.request.contextPath}/joinus/logout.do",
	        method: "post"
	      });

	      var csrfInput = $('<input>').attr({
	        type: "hidden",
	        name: "${_csrf.parameterName}",
	        value: "${_csrf.token}"
	      });

	      form.append(csrfInput);
	      $('body').append(form);
	      form.submit();
	    }
	  });
	  </script>

• button 태그를 쓰지 않고도 스타일적으로 통일감 있는 로그아웃 버튼을 만들 수 있다.