지금까지 우리는 GET방식으로 늘 사용해왔다. 하지만 POST방식도 이제는 알아야한다. GET 방식을 간단하게 예를 들어보자면 https://chocoboy.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F# 이런식으로 주소창에 페이지 정보가 다 담겨있으면 GET 방식이라고하고 https://chocoboy.tistory.com/manage/newpost/이런식으로 정보에대한 뒷부분이 보이지 않도록 숨겨놓은걸 POST방식이라고한다. 보는것처럼, GET 방식은 보안에 취약하고, POST 방식은 보안적으로 보인다. 그렇다고 무조건 POST 방식을 쓰는것이 아니라, 필요에 따라서 GET 방식도 쓰기도하고, POST 방식도 쓰기도 한다. 예를들어 당장 이블로그나 카페를 봐도 굳이 POST 방식을 담을 필요는 없다. 그래야 주소창을 복사하여 전달할 경우 사람들에게 같은 화면을 보이게 할 수 있기 때문이다. 자 그럼 바로시작해보자.


GET 방식을 POST 방식으로 바꿔라

다음과 같이 GET 방식으로 코드가 출력이된다.

페이징 2~5 누를때마다 POST 방식으로 출력해보자. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type = "text/javascript">

goList = function(seq) {
	alert(seq);
	// form 객체를 가져온다
	$("#thisPage").val(seq);
	$("#formList").submit();
	// 그 가져온 객체를 전달한다.
};
s
	goForm = function(seq){
		$("#ifmmSeq").val(seq);
		$("#formList").attr("action", "/infra/code/codeGroupView");
		$("#formList").submit();
	}
	
	</script>

다음코드는 자바스크립트로, MemberList.jsp에 필수적으로 넣어줘야 포스트 방식이 적용이된다.

 

<nav aria-label="...">
  <ul class="pagination">
		  <c:if test="${vo.startPage gt vo.pageNumToShow}">
		                <li class="page-item"><a class="page-link" href="javascript:goList(<c:out value='${vo.startPage -1}'/>);">Previous</a></li>
		</c:if>
		<c:forEach begin="${vo.startPage}" end="${vo.endPage}" varStatus="i">
			<c:choose>
				<c:when test="${i.index eq vo.thisPage}">
		                <li class="page-item active"><a class="page-link" href="javascript:goList(<c:out value='${i.index}'/>);">${i.index}</a></li>
				</c:when>
				<c:otherwise>             
		                <li class="page-item"><a class="page-link" href="javascript:goList(<c:out value='${i.index}'/>);">${i.index}</a></li>
				</c:otherwise>
			</c:choose>
		</c:forEach>     
		<c:if test="${vo.endPage ne vo.totalPages}">                
		                <li class="page-item"><a class="page-link" href="javascript:goList(<c:out value='${vo.endPage -1}'/>);">Next</a></li>
		</c:if>  
  </ul>
</nav>

 

href=이부분을 우리가 만들어 놓은 자바스크립트에 매칭시키게 해놓는다.

<form id="formList" name="formList" method="POST" action="/infra/member/memberList">
<input type="hidden" id="thisPage" name="thisPage" value="<c:out value="${vo.thisPage}" default="1"/>">
<input type="hidden" id="ifmmSeq" name="ifmmSeq">

자바스크립트에잇는 내용객체와 form의 Id와  name을 일치시킨다.

그리고 페이지에대한 데이터를 받아들일 수 있게 type="hidden" 으로 하여 데이터를 받는다.

 

결과값

그렇게되면 다음과 같이 GET 방식과 다르게 POST 방식으로 주소가 가려지는것을 볼 수 있다.

 


 

 

 

To be continue..

복사했습니다!