提交 POST 表单后，打开一个显示结果的新窗口

IT技术 javascript html post
2021-01-12 14:07:52

类似于表单提交的 JavaScript 发布请求向您展示了如何提交您在 JavaScript 中通过 POST 创建的表单。下面是我修改后的代码。

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

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

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

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

我想做的是在新窗口中打开结果。我目前正在使用这样的东西在新窗口中打开一个页面：

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
5个回答

添加 

<form target="_blank" ...></form>

或者

form.setAttribute("target", "_blank");

根据您的表单定义。

@Naren，我在通过 JS 提交表单时遇到了 Safari 浏览器和（iphone 设备）中的问题。我在发布时遇到“网络连接丢失”。如果我尝试将调试器暂停“x”秒并释放调试器，那么它工作正常。你能指导我吗？
2021-03-13 14:07:52
简短而甜蜜。感谢！！
2021-03-29 14:07:52
请记住将属性 id 添加到表单元素，否则即使关闭了弹出窗口阻止程序，这在 Safari 浏览器中也不起作用。<form id="popupForm" target="_blank" ...></form>
2021-04-10 14:07:52

如果您想按照问题中的原样从 Javascript 创建和提交表单，并且想创建具有自定义功能的弹出窗口，我建议使用此解决方案（我在添加的行上方添加了注释）：

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();
@SaurabhNanda 据我所知，元素上的target属性在HTML 4.01 Transitional 中没有被弃用，显然是留在HTML 5 中。form
2021-03-15 14:07:52
+1 比接受的答案更好，因为它实际上将结果与 OP 想要的选项一起放在弹出窗口中。
2021-03-28 14:07:52
@mjaggard：你添加了什么？建议对此答案进行编辑可能值得。
2021-03-30 14:07:52
在 IE 上对我不起作用 - 它创建一个具有指定属性的新窗口，然后在另一个新窗口中加载结果，将前一个窗口留空。
2021-03-31 14:07:52
一个警告：我必须将我的表单附加到文档正文才能起作用（在 FF 17 中）。创建一个片段并尝试对其进行总结没有用。
2021-04-08 14:07:52 
var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();
我认为在附加表格后这是不完整的，您应该将其删除以获得最佳实践。
2021-03-17 14:07:52
@theJollySin：通过在标签上调用 jQuery，它将变成一个真正的 DOM 元素，并在插入 DOM 时关闭。
2021-04-01 14:07:52
我认为缺少 appendTo('body') 并且最后一行应该写为： $form.appendTo('body').submit();
2021-04-02 14:07:52
我是否遗漏了什么，或者您是否仍然需要.append关闭表单标签？
2021-04-04 14:07:52

流窗口最简单的工作解决方案（在 Chrome 上测试）：

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>

我知道这个基本方法：

1)

<input type=”image” src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden” name=”a” value=”<?= $a ?>”>
<input type=”hidden” name=”b” value=”<?= $b ?>”>
<input type=”hidden” name=”c” value=”<?= $c ?>”>
</form>

3)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = “POST”;
        action = “results.php”;
        target = “results”;
        submit();
    }
});
</script>

作品！

那就是jquery！他要求纯 JS
2021-03-27 14:07:52
其它你可能感兴趣的问题
上一篇使用 React JS 进行下拉的 OnChange 事件 下一篇表单提交后如何进行Jquery回调？