코딩을 하다보면 팝업 윈도우 창을 호출해야 하는 경우가 생긴다.
팝업 윈도우 창에 간단한 텍스트를 적는 경우가 대다수이나 때로는 많은 데이터를 담는 기능을 요하는 팝업이 필요할 수 있다.
부모 윈도우에서 넘긴 정보로 팝업 윈도우에서 많은 데이터를 처리하려면 생각했던거만큼 코딩이 잘 안된다.
왜냐하면 팝업을 띄우기 위한 호출과 데이터를 호출하는 2번의 연속 데이터를 처리해야 하며 이를 위해 웹 호출 순서가 어긋나는 경우 내가 원하는데로 데이터를 팝업화면에 못뿌려 주기 때문이다.
더군다나 GET 방식으로 하면 간단히 URL로 넘기면 되는데, POST로 넘겨야 하는 경우 또 생각처럼 잘 안된다.
구글링과 우여곡적 겪으며 만든 POST 팝업 윈도우 창 생성하는 코드를 기록해준다.
1. 요약
1.1 팝업 윈도우 오픈하는 url 호출
1.2 팝업 윈도우에서 데이터를 호출
2. 부모 윈도우 창 (jsp 파일)
2.1 HTML
<form id="myForm" name="myForm">
<input type="hidden" name="sample" id="sample" value="sample" />
</form>2.2 자바 스크립트
// 1.빈창 팝업 생성
var url = "";
var windowTargetName = "targetName";
var features = "scrollbars=yes,width=1000,height=800,location=no, resizable=yes";
window.open(url, windowTargetName, features);
// 2.POST로 데이터 전달
myForm.action="url.do"; // 이동
myForm.method="post";
myForm.target=windowTargetName;
myForm.submit();HTML에는 myForm과 같이 폼을 새로 생성해준다.
open 메소드에서 첫번째 파라미터는 빈창으로 띄우기 위해 url을 비워놨다.
두번째 파라미터에서는 타겟으로 할 이름을 명시적으로 지정해주며, 세번째 파라미터에서는 내가 사용하기 위한 윈도우 팝업의 기능을 다양하고 가공해준다.
이후 2번 항목에서 POST로 데이터를 지정한다.
데이터를 넘겨주기 위해서는 HTML Form에 데이터를 담아서 넘겨주면 된다. (sample 데이터가 넘어가겠지?)
3. 팝업 윈도우
3.1 JAVA
@RequestMapping(value="url.do")
public String urlMethod(HttpServletRequest request , HttpServletResponse response, Model model ) throws Exception {
// url.jsp라는 이름을 가진 팝업 생성
return "url";
}
3.2 url.jsp
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" import="java.util.*, java.lang.*"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<script type="text/javascript">
$(document).ready(function() {
url = "데이터 호출 URL"
$.ajax({
type : "POST",
url : url,
data : $("#myForm").serialize(),
success : function(data) {
},
error : function(request, status, msg) {
}
});
});
</script>
</head>
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" style="overflow-x:auto; overflow-y:auto; position:relative;">
</body>
</html>팝업에서 쓰일 간단한 jsp 파일 소스이다.
해당 소스와 같이 기초 팝업을 띄우고 팝업 데이터를 가져오기 위해서는 팝업이 로딩되면서 ajax로 데이터를 호출함으로써 데이터를 가공해서 처리해줄 수 있다.
이렇게 POST로 부모윈도우에서 자식 윈도우로 팝업 생성하고 데이터 가공처리 하는 방법 끝.
'Stack Overflow > 스프링' 카테고리의 다른 글
| [스프링] JSTL에서 날짜 Date 추출 및 일자 연산 코드 (4) | 2022.01.15 |
|---|---|
| [스프링] PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException 오류 이슈 대응 (110) | 2022.01.12 |
| [이클립스] error occured processing xml content is not allowed in prolog 관련 에러 (923) | 2022.01.08 |
| [이클립스] no setter found for property [BLABLA] in class 관련 대응 (4) | 2022.01.07 |
| [스프링] jjencode 파일 decode 하기(실전 개발) (4) | 2021.12.25 |
댓글