<form> 데이터를 서버로 제출하고 응답결과를 <iframe>에서 보여주기

 

<form>태그의 target 속성을 알아야한다.

_blank	서버로부터 받은 응답을 새로운 윈도우나 탭(tab)에서 보여줌.
_self	기본값으로 생략 가능.
_parent	서버로부터 받은 응답을 현재 프레임의 부모 프레임에서 보여줌.
_top	서버로부터 받은 응답을 현재 윈도우 전체에서 보여줌.
프레임 이름	서버로부터 받은 응답을 명시된 프레임에서 보여줌.

 

 

 

 

 

 

 

 

로직

 

1. <iframe> 생성

↓
2. <form> 생성 - target을 iframe의 name값과 똑같이 설정하여 form 의 결과값이 iframe 에서 보여지게 만든다.

이때 추가로 보내고싶은 데이타를
<input type="hidden">으로 연결하여 보낸다. 

↓
3. <ifram>보내기
<form>태그의 action주소로 보낸다.

 

 

---

<div id = "formSpace"></div>
<div id="preView" ></div>

//iframe 생성
function createIframe(){
var aIframe = document.createElement("iframe");
aIframe.setAttribute("class","iframeTag");
aIframe.setAttribute("name","reportPreview");
aIframe.style.width = "100%";
aIframe.style.height = "100%";

document.getElementById("preView").appendChild(aIframe);
}


$.ajax({
    type: "GET",
    url: "/test",
    //async : false,
    data : $("#myForm").serialize(),
    success : function(data){


    var one =data.ResulMap.one;
    var two =data.ResulMap.two;

    //1.<iframe> 생성
    createIframe();

    //2. <form> 생성
    var tmp_frm = $('<form />')
    .attr({
    'action':'/test.jsp',
    'method':'post',
    'name':'reportIframe',
    'target':'reportPreview'})
    .append($('<input type="hidden" name="one" value='+one+' /><input type="hidden" name="two" value='+two+' />'));

    $("#formSpace").append(tmp_frm);

    //3.iframe 보내기
    document.reportIframe.submit();


    //4. form 지워주기
    $("#formSpace").empty();
    }
})