세미프로젝트)form 하나에서 두개의 servlet으로 보내기

리뷰 등록을 작업하는 와중에 문제가 발생했다.

폼은 하나를 만들었는데 버튼을 클릭하면 하나는 등록작업을 실행하는 servlet으로 가야하고, 나머지 하나는 리뷰조회 jsp를 실행하는 servlet으로 가야했다.

그런데 onclick시 링크는 하나만 가능하고.. form action부분에 직접 등록작업으로 가는 servlet을 등록해버리면 둘 중

하나만 작동했기 때문이다.........

 

그래서 ajax를 사용했다!

 

참고사이트는 아래와 같다.

• (https://m.blog.naver.com/PostView.nhnblogId=racoon_z&logNo=221080162986&proxyReferer=https:%2F%2Fwww.google.com%2F)
• https://2ham-s.tistory.com/307 

// file 전송은 FormData() 사용 할것! 

 

우선, jsp파일에서 글 등록 버튼을 눌렀을때 실행할 함수를 onclick에 넣어주었다.

<input type="button" id="btnSubmit" value="글 등록" onclick="goList();">

 

 

그리고 밑에 script를 추가해주었다.

ajax로 먼저 등록 서블릿을 보낸 다음에 success 하다면, 리뷰조회 jsp로 보내는 servlet을 실행시키는 형식으로 만들었다.

<script type="text/javascript">
	
		function goList(){
			
			var formData = new FormData(document.getElementById("frm"));
			formData.append('email',document.getElementById("email").value);
			formData.append('recipeCode',document.getElementById("recipeCode").value);
			formData.append('reviewSubject',document.getElementById("reviewSubject").value);
			formData.append('reviewPhoto',document.getElementById("reviewPhoto").files[0]);
			formData.append('reviewContent',document.getElementById("reviewContent").value);
			alert("글 등록 성공!");
			
			
			$.ajax({
				url: "<%=request.getContextPath()%>/reviewRegister",
				type:"POST",
				cache: false,
				processData: false,
	            contentType: false,
				data : formData,
				success : function(data){
					console.log(data);
					window.location = "<%=request.getContextPath()%>/reviewListInquiry";
				},
				error : function(request, status, error){
					console.log(error);
				}
			});
		}
	</script>