一、前因
一般我们是用 window.open(url,name,params); 打开新窗口, url 会携带一些参数, 但存在参数过多,引发url 过长截断,无法打开正确窗口, 所以我们需要使用 post 方式来实现新窗口打开。
post 打开新窗口有两种方法:
- ajax 形式
- form 表单
备注:
url 为打开窗口链接;
name 为窗口名称;
params 为窗口参数,比如 height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no
参数可参考 http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html
二、实践
方一 ajax 推荐!
var params = {
name: 'hxy',
desc: 'dahuamao'
};
var win = window.open(); // 放在外面是因为浏览器可能会阻止新打开窗口,放在异步请求外面就ok !!!
$.ajax({
url: '/report/preview',
type: 'post',
data: params,
asyn: false
}).done(function(data) {
var doc = win.document;
doc.write(data); // !!! 关键,接收后端的数据并进行新窗口写入
doc.close();
});
方二 form 形式
// post 提交参数
var params = {
name: 'hxy',
desc: 'dahuamao'
};
var tempForm = $('<form style="display:none;" id="tempForm" method="POST" target="_blank" action="/report/preview"></form>');
$.each(params, function(k,v) {
console.log(k,v);
var hideInput = $('<input name="' + k + '" value=' + v + ' type="hidden"/>');
tempForm.append(hideInput);
});
$('body').append(tempForm);
tempForm.submit();
tempForm.remove();
两种方法后端都一样,以node 后端 为例, 逻辑为 解析 post 请求的参数,并返回模板
var params = this.request.body;
yield this.render('report/index.html', {
name: params.name,
desc: params.desc
});