본문 바로가기

Frontend/jQuery & JSTL

JSP에서 JSP로 데이터 전달

반응형

JSP 파일에서 `<jsp:include>` 태그를 사용하여 "sample.jsp" 페이지를 포함한 경우 데이터 전달 방법

1. 쿼리 문자열(Query String)로 전달
URL 매개 변수를 사용하여 데이터를 전달할 수 있다. `<jsp:include>` 태그를 사용할 때, `page` 속성의 값 뒤에 쿼리 문자열을 추가

<jsp:include page="sample.jsp?dataFilterName=${dataFilter.DATA_FILTER_NAME}" flush="true"/>

URL에 RequestParameter가 붙어 404에러가 나는 경우

<jsp:include page="sample.jsp">
	<jsp:param name="dataFilterName" value="${dataFilter.DATA_FILTER_NAME}" />
</jsp:include>


2. 세션(Session)으로 전달

데이터를 세션에 저장하고 "sample.jsp" 페이지에서 세션에서 해당 데이터 검색 가능

첫 번째 JSP 파일에서 세션에 데이터 저장

<% session.setAttribute("dataFilterName", dataFilter.DATA_FILTER_NAME); %>

   

3. Request Attribute로 전달
데이터를 요청(request) 속성(attribute)에 저장하고 "sample.jsp" 페이지에서 해당 데이터 검색 가능

첫 번째 JSP 파일에서 요청 속성에 데이터 저장

<% request.setAttribute("dataFilterName", dataFilter.DATA_FILTER_NAME); %>

 


 

쿼리 문자열(Query String), 세션(Session), 요청속성(Request Attribute)중 데이터를 전달한 방식에 따라 JSP에서 전달 받은 데이터를 불러온다.

<!-- page -->
<% String dataFilterName = request.getParameter("dataFilterName"); %>
<!-- session -->
<% String dataFilterName = (String) session.getAttribute("dataFilterName"); %>
<!-- attribute -->
<% String dataFilterName = (String) request.getAttribute("dataFilterName"); %>

불러온 값을 JavaScript에서 사용하려면 먼저 위의 전달 받은 데이터를 불러온 후 다음과 같은 방법 중에 사용 가능한 방식을 사용한다.

 

1. JavaScript의 변수로 할당

<script>
  var dataFilterId = '<%= dataFilterId %>';
  // 이제 dataFilterId 변수를 JavaScript에서 사용할 수 있습니다.
</script>

2. HTML속성으로 추가

JSP 변수의 값을 HTML 요소의 데이터 속성(attribute)으로 추가하고, JavaScript에서 해당 요소를 찾아 값을 가져옴

<div id="dataFilterElement" data-filter-id="<%= dataFilterId %>"></div>
<script>
  var dataFilterElement = document.getElementById('dataFilterElement');
  var dataFilterId = dataFilterElement.getAttribute('data-filter-id');
  // 이제 dataFilterId 변수를 JavaScript에서 사용할 수 있습니다.
</script>

3. Ajax 요청

필요한 경우 JavaScript에서 서버로 Ajax 요청을 보내어 데이터를 동적으로 가져올 수도 있음

이 방법은 페이지 로딩 후에 데이터를 가져와야 하는 경우에 유용

<script>
  var dataFilterName;
  // Ajax 요청을 사용하여 dataFilterName 값을 서버에서 가져옵니다.
  // $.ajax() 또는 fetch API 등을 사용합니다.
</script>

 

반응형