Window.open 并通过post方法传递参数

IT技术 javascript
2021-02-04 01:33:29

使用 window.open 方法,我打开带有参数的新站点,我必须通过 post 方法传递这些参数。我找到了解决方案,但不幸的是它不起作用。这是我的代码:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>  

接下来,我创建数组:

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>  

并通过以下方式调用函数:

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />   

但是,当我单击此按钮时,站点 test.asp 是空的(当然我尝试获取传递值 - Request.Form("b"))。

我该如何解决这个问题,为什么我无法获得传递值?

6个回答

而不是将表单写入新窗口(这很难正确,在 HTML 代码中对值进行编码),只需打开一个空窗口并将表单发送到它。

例子:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

编辑:

要动态设置表单中的值,您可以这样做:

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

要发布表单,请使用值调用函数,例如openWindowWithPost('a','b','c');.

注意:我改变了与表单名称相关的参数名称,以表明它们不必相同。通常,您会使它们彼此相似,以便更轻松地跟踪值。

这正是我的想法。发布的原始代码似乎确实有效……但在 IE 上除外。
2021-03-15 01:33:29
谢谢你的回复。但我有一张桌子,列中是按钮。当我单击此按钮时,我打开新页面并传递一些参数。所以我必须编写函数,并为每个按钮调用它并传递固定参数。我的问题,我怎么能重写你上面的代码来运行?
2021-03-21 01:33:29
@EvertonAgner:为窗口使用唯一的名称,它将作为_blank.
2021-03-26 01:33:29
@Guffa 任何方式也可以模拟target="_blank"?
2021-03-29 01:33:29
@luk4443:如果您在打开窗口时使用 URL,那么在您发布表单时页面将被替换。将 URL 放在action表单属性中。
2021-04-05 01:33:29

由于您希望在 javascript 中包含整个表单,而不是将其写在标签中,您可以这样做:

let windowName = 'w_' + Date.now() + Math.floor(Math.random() * 100000).toString();
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", windowName);

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', windowName);

form.submit();
@Yaje - 只需添加"resizable"or"resizable=1""resizable=yes"作为window.open()调用中的第三个参数,浏览器将打开一个新窗口而不是新选项卡。
2021-03-14 01:33:29
不应该出现后一些清理form.submit(),除去formdocument.body
2021-03-26 01:33:29
@Mercenary 页面在此处的新选项卡中打开,我可以在新的弹出窗口中打开该页面吗?
2021-04-05 01:33:29
没有基于 jQuery 和纯 JavaScript 的实现。谢谢。
2021-04-09 01:33:29

我完全同意上面发布的mercenary的回答,并为我创建了这个对我有用的功能。这不是答案,而是雇佣兵对上述帖子的评论

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

尽管我迟到了 3 年,但为了简化 Guffa 的示例,您甚至根本不需要页面上的表单:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

编辑:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

也许对某人有用的提示:)

如果您.remove()在 Jonathan 的建议之后添加.appendTo('body').submit(),您甚至可以在自己之后进行清理,而不会用表单对象将当前页面弄乱。
2021-03-15 01:33:29
没有这部分$("body").append(form);它将无法工作
2021-03-30 01:33:29
此解决方案不完整。它应该首先将此表单添加到正文然后提交。所以它说 .submit(); 它应该说 .appendTo('body').submit();
2021-04-07 01:33:29

您可以简单地target="_blank"在表单上使用

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

以你喜欢的方式添加隐藏输入,然后简单地用JS提交表单。

此外,由于window.openclick处理程序中未调用(或任何用户触发的事件)时,将作为弹出窗口被阻止
2021-03-20 01:33:29