<form action="#">에 의한 자기 자신으로의 GET요청 에러

상황

<div class="media-body">
	<form action="#" class="comment-reply-form">
    	<div id="trumbowyg-demo"></div>
        	<button type="button" onclick="javascript:addComment(${boardDto.boardTypeSeq}, ${boardDto.boardSeq})" 
            					class="btn btn--sm btn--round">Post Comment</button>
     </form>
</div>

• 댓글 작성 버튼을 누르면 댓글 내용과 기타 정보를 ajax로 RestController로 보내도록 구현해둔 상황
• 분명히 DB에도 댓글이 잘 들어갔는데 ajax로 실패 응답이 오고,
  로그를 살펴보니 요청한 적이 없는 매핑으로 GET요청과 지정한 적 없는 파라미터가 넘어가있는 상황
  
  

@GetMapping("/notice/readPage.do") 
	public String readPage(Integer boardSeq, Integer boardTypeSeq, 
    					HttpSession session, Model model) {
                 ....
    	model.addAttribute("boardDto", boardDto);
		model.addAttribute("isLike", isLike);
		model.addAttribute("attFileList", attFileList);
		model.addAttribute("comments", comments);
		
		return "forum/notice/read";
	}

• readPage.do는 boardSeq와 boardTypeSeq를 받아서 특정 게시물을 식별해서 model에 담아 read.jsp view로 넘기는 컨트롤러 메서드

원인 및 해결

• 아마 <form action="#">가 원인이었던 것 같다.

• form태그는 action을 #로 지정하면 자기 자신으로 요청이 가게 되고, method를 지정하지 않으면 default가 get이다.
  trumbowyg에디터는 내부적으로 id값과 같은 값을 name으로 가지는 textarea 태그를 생성한다. 때문에 자기자신(readPage.do)로 get요청이 가면서 form요소인 textarea의 값을 넘기게 되는 것이다.

• readPage.do에 매핑된 메서드 중에는 해당 name을 parameter로 받는 매개변수가 정의되어 있지 않으므로 에러가 발생

• form태그의 action 속성을 지움으로써 해결함

• form태그로 파라미터를 전송하는 요청을 보낼게 아니라 ajax를 쓸거라면 그냥 div를 쓰는게 좋을 것 같다.

• 근데 button type이 submit이 아니라 button이었는데도 form태그 전송이 되는게 의아하다.

• 조금 더 알아보아야 할 듯.

• ?? 근데 확인 차 다시 action="#"을 넣어서 테스트해봤는데 에러가 나지 않고 의도대로 동작한다. (form태그 submit 안되고 ajax로만 잘 간다). 뭐지?