您的位置:首页 > 运维架构

打开新窗口以post方式提交

2017-04-10 15:24 274 查看
window.open以post方式提交

1、按钮准备

<input id="btn_amp" type="button" value="大表系统"/>
<input id="btn_amp2" type="button" value="大表系统"/>

2、js方法
$(function(){
$("#btn_amp").click(function(){
var username="<%=username%>",password="<%=password%>";
postUrl('<%=ampUrl%>'+'login.do',username,password);
});
$("#btn_amp2").click(function(){
var username="<%=username%>",password="<%=password%>";
//var data = '{username:'+username+',password:'+password+'}';
openPostWindow('<%=ampUrl%>'+'login.do','大表统一远传',username,password);
});
});
//以post形式在本页打开
function postUrl(url,username,password){
var f=document.createElement("form");
f.action=url;
f.method="post";//指定为post
f.innerHTML="<input type='hidden' name='username' value='"+username+"'/>"+
"<input type='hidden' name='password' value='"+password+"'/>";
document.body.appendChild(f);
f.submit()
}

//以post形式打开新的页面,可以传递多个参数
function openPostWindow(url,windowname,username,password){
var tempForm = document.createElement("form");
tempForm.id="tempForm1";
tempForm.method="post";
tempForm.action=url;
//open方法不能设置请求方式,一般网页的post都是通过form来实现的。
//如果仅仅模拟form的提交方式,那么open方法里那种可设置窗体属性的参数又不能用。
//最后想办法整了这么一个两者结合的方式,将form的target设置成和open的name参数一样的值,通过浏览器自动识别实现了将内容post到新窗口中
tempForm.target=windowname;
tempForm.innerHTML="<input type='hidden' name='username' value='"+username+"'/>"+
"<input type='hidden' name='password' value='"+password+"'/>";
// tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); //IE
tempForm.addEventListener("onsubmit",function(){ openWindow(windowname); }); //chrome
document.body.appendChild(tempForm);
//tempForm.fireEvent("onsubmit"); //IE
tempForm.dispatchEvent(new Event("onsubmit"));//chrome
//必须手动的触发,否则只能看到页面刷新而没有打开新窗口
tempForm.submit();
document.body.removeChild(tempForm);
}
//以post形式打开新的页面,只能传递一个参数
function openPostWindow2(url, windowname, data)

{

var tempForm = document.createElement("form");

tempForm.id="tempForm1";

tempForm.method="post";

//url
tempForm.action=url;
//open方法不能设置请求方式,一般网页的post都是通过form来实现的。
//如果仅仅模拟form的提交方式,那么open方法里那种可设置窗体属性的参数又不能用。
//最后想办法整了这么一个两者结合的方式,将form的target设置成和open的name参数一样的值,通过浏览器自动识别实现了将内容post到新窗口中
tempForm.target=content;

var hideInput = document.createElement("input");

hideInput.type="hidden";

//传入参数名,相当于get请求中的content=
hideInput.name= "content";

//传入传入数据,只传递了一个参数内容,实际可传递多个。
hideInput.value= data;

tempForm.appendChild(hideInput);
// tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); //IE
tempForm.addEventListener("onsubmit",function(){ openWindow(windowname); }); //chrome

document.body.appendChild(tempForm);

//tempForm.fireEvent("onsubmit"); //IE
tempForm.dispatchEvent(new Event("onsubmit"));//chrome

//必须手动的触发,否则只能看到页面刷新而没有打开新窗口
tempForm.submit();

document.body.removeChild(tempForm);

}
function openWindow(name)
{
window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  window.open post 新窗口