这里假设父页面有个弹窗按钮,点击后弹出一个新的窗体,而这个窗体还要包含父窗口的数据,在子窗体操作完后关闭子窗体然后刷新父窗体:
父窗体的弹窗按钮单击事件触发后的处理函数:
1 function sendToMakePrice(){ 2 var hrid=$("#hrid").val(); 3 var appid=$("#appid").val(); 4 var posid=$("#posid").val(); 5 var hisid=$("#hisid").val(); 6 7 //到同意与否的界面respond.jsp 8 var tempForm = document.createElement("form"); 9 tempForm.id="tempForm1"; 10 tempForm.method="post"; 11 tempForm.action="${pageContext.request.contextPath}/skipmakepricedetail.action"; 12 tempForm.target="makepricepage"; 13 var hridInput = document.createElement("input"); 14 hridInput.type="hidden"; 15 hridInput.name= "hrid" 16 hridInput.value= hrid; 17 var posidInput = document.createElement("input"); 18 posidInput.type="hidden"; 19 posidInput.name= "posid" 20 posidInput.value= posid; 21 var appidInput = document.createElement("input"); 22 appidInput.type="hidden"; 23 appidInput.name= "appid" 24 appidInput.value= appid; 25 var hisidInput = document.createElement("input"); 26 hisidInput.type="hidden"; 27 hisidInput.name= "hisid" 28 hisidInput.value= hisid; 29 tempForm.appendChild(hridInput); 30 tempForm.appendChild(posidInput); 31 tempForm.appendChild(appidInput); 32 tempForm.appendChild(hisidInput); 35 document.body.appendChild(tempForm); 36 $("#tempForm1").bind("submit",function(){ 37 openMakePricePage(); 38 }); 39 $("#tempForm1").submit(); 40 document.body.removeChild(tempForm); 41 42 } 43 function openMakePricePage(){ 44 window.open("","makepricepage",'height=300, width=480, top=200, left=400, toolbar=no,alwaysRaised=true'+ 45 'menubar=no,scrollbars=no,resizable=no,location=no, status=no,alwaysRaised=yes,titlebar=no,toolbar=no'); 46 }
首先从父窗口获取参数值,然后使用js的
document.createElement("form"); 创建一张表单以及属性35行是将创建的表单追加到当前页面,注意在这以后写表单提交的监听函数,然后提交,最后注意清楚你创建的表单,
这样一来结构就很明显,单击弹窗按钮后调用这个
sendToMakePrice()函数,创建好你要访问的后台action表单,然后提交表单触发提交时间,返回一个openMakePricePage()函数,这个函数再调用window.open函数打开你的新窗体,注意这里的写法,第一个参数为""不然新窗体显示名字,第二个参数则必须与12行target属性相同,这样弹出来的窗体就包含父窗体的属性了。
1 function makePrice(){ 2 var price=$("#price").val(); 3 var ea=/^[0-9]*$/; 4 if(!ea.test(price)){ 5 alert("请输入数字") 6 return ; 7 } 8 var posid=$("#posid").val(); 9 var hrid=$("#hrid").val(); 10 var appid=$("#appid").val(); 11 var hrinfo=$("#hrinfo").val(); 12 var hisid=$("#hisid").val(); 13 $.ajax( { 14 type: "POST", 15 url : "makeprice.action", 16 data: "posid="+posid+"&hrid="+hrid+"&appid="+appid+"&hrinfo="+hrinfo+"&price="+price+"&hisid="+hisid, 17 success : function(html) { 18 alert("发送成功"); 19 opener.opener.location.reload(); 20 opener.window.close(); 21 setTimeout("window.close()",1000); 22 } 23 }); 24 }
这里是子窗体操作提交后提示信息刷新父窗体并且1秒后关闭自己的函数,19行的函数即使刷新父窗体21行写了一个时间触发器关闭窗体这样实现一个比较平稳的过渡