Button 의 Action으로 페이지 이동과 파라미터 전송

 <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" name="title"    
                   th:value="${dto.title}" >
        </div>

이러한 형식의 텍스트를 출력하는 div가 있고

<button type="button" class="btn btn-danger removeBtn"> Remove </button>

 

이러한 Button이 정의 되어 있고

 

<script th:inline="javascript">

var actionForm = $("form");

$(".removeBtn").click(function(){

actionForm.attr("action", "/guestbook/remove")
.attr("method", "post");

actionForm.submit();
})

console.log("zzzzz");
</script>

 

이러한 스크립트가 바로 밑에 존재하다면

removeBtn을 눌렀을때 

 

actionForm.attr("action", "/guestbook/remove")
.attr("method", "post");

actionForm.submit();

해당 구문으로 인해 Post 방식으로 /guestbook/remove 에게 위에서 input 으로 정의 되어있는 name=title에 적혀있는 text들을 전달해주며, 

/guestbook/remove 가 매핑된 컨트롤러에서는 name의 맞는 데이터형과 변수명을 일치시켜서 매개변수를 만들어두면 input 안에 값들이 넘어와서 조작할수있다