如何使用Javascript通过'POST'方法重定向？

Posted 2023-02-22

技术标签:

【中文标题】如何使用Javascript通过\'POST\'方法重定向？【英文标题】：How to redirect through 'POST' method using Javascript?如何使用Javascript通过'POST'方法重定向？ 【发布时间】：2013-10-04 13:16:43 【问题描述】：

我已经查询过，但没有弄清楚我发现了什么。有没有办法使用javascript或jquery通过POST方法重定向给url？

【问题讨论】：

你能举个例子吗？我真的不明白这个问题 【参考方案1】：

根据Eugene Naydenov的回答，我最终使用了这个也可以填写表单数据，希望对其他人有用：

function redirectPost(url, data) 
    var form = document.createElement('form');
    document.body.appendChild(form);
    form.method = 'post';
    form.action = url;
    for (var name in data) 
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = data[name];
        form.appendChild(input);
    
    form.submit();


// redirectPost('http://www.example.com',  text: 'text\n\ntext' );

更新（2021 年）：几年后，一个打开新选项卡/窗口的版本也对我有用，所以希望这也有用，只是确保这会在点击事件中发生，因为浏览器应该否则阻止，

function openPostPage(url, data) 
    var form = document.createElement('form');
    document.body.appendChild(form);
    form.target = '_blank';
    form.method = 'post';
    form.action = url;
    for (var name in data) 
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = data[name];
        form.appendChild(input);
    
    form.submit();
    document.body.removeChild(form);

【讨论】：

这是最好的答案，因为它说明了通过 POST 方法发送数据，这就是为什么你要使用 POST 方法重定向，否则你会使用 GET。您可能必须在其中添加document.body.appendChild(form);（例如在form.submit() 之前），因为html 规范不允许提交与文档无关的表单。请参阅this answer 了解更多信息。我建议在提交后添加document.body.removeChild(form);。我很高兴我找到了这个 SO 帖子和答案。不允许使用XMLHttpRequest 重定向来自其他域的页面。浏览器会在没有Access-Control-Allow-Origin 的情况下检测到它，这是解决CORS 问题的一种方法，使用表单提交来重定向发布请求。 @ruben056 我们重定向了当前显示的页面。无论如何，所有内容都会被删除。【参考方案2】：

创建表单，填写method和action属性，提交表单。

var redirect = function(url, method) 
    var form = document.createElement('form');
    form.method = method;
    form.action = url;
    form.submit();
;

redirect('http://www.example.com', 'post');

jQuery 版本（但在这种特殊情况下，我会更喜欢纯 JavaScript）：

var redirect = function(url, method) 
    $('<form>', 
        method: method,
        action: url
    ).submit();
;

redirect('http://www.example.com', 'post');

【讨论】：

如果方法是不同的域，这将不起作用。但是，如果您将其插入文档中，它将起作用。当然。与任何表单提交相同。只是因为same-origin policy。我必须添加这个才能让提交工作：$('body').append(form);【参考方案3】：

这里的想法是在将用户重定向到另一个网页时将数据发送到服务器，而不使用 GET 方法并保持 URL 的外观。因此，我们将使用相同的过程，使用 POST 方法发送表单。

用于创建表单并将其提交到服务器的 HTML/Javascript 代码：

<html>
<body>
<script>
var form = document.createElement("form");
form.method = 'post';
form.action = 'receive.php';
var input = document.createElement('input');
input.type = "text";
input.name = "data";
input.value = "this is the data I'm sending to server through POST";
form.appendChild(input);
form.submit();
</script>
<body>
<html>

在 PHP 中接收此数据：

<pre>
<?php
var_dump($_POST);
?>
</pre>

这样，用户将被重定向到receive.php，并在POST方法中通知一些数据。

【讨论】：

【参考方案4】：

试试这个：

var url = 'http://example.com/vote/' + Username;
var form = $('<form action="' + url + '" method="post">' +
  '<input type="text" name="api_url" value="' + Return_URL + '" />' +
  '</form>');
$('body').append(form);
$(form).submit();

【讨论】：

【参考方案5】：

其实有个窍门。您创建一个隐藏表单并触发提交按钮，例如使用 jQuery：

<form method="POST" action="newurl.html" id="myform">
</form>

然后做一个

$('#myform').submit();

我建议你使用 Eugene Naydenov

发布的非 jQuery 版本

【讨论】：

请注意，如果您将$('#myform').submit() 更改为document.querySelector('#myform').submit()，则不需要jQuery。【参考方案6】：

使用 POST 变量重定向（在 jQuery 上）

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, x: 'example', y: 'abc');

$.extend(

    redirectPost: function(location, args)
    
        var form = '';
        $.each( args, function( key, value ) 
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        );
        $('<form action="'+location+'" method="POST">'+form+'</form>').submit();
    
);

【讨论】：

【参考方案7】：

您可以使用序列化表单和帖子中的所有数据。下面是一个例子。

$("#submit_btn").click(function()
        $('.error_status').html();
            if($("form#frm_message_board").valid())
            
                $.ajax(
                      type: "POST",
                      url: "<?php echo site_url('message_board/add');?>",
                      data: $('#frm_message_board').serialize(),
                      success: function(msg) 
                          var msg = $.parseJSON(msg);
                          if(msg.success=='yes')
                          
                                                                            return true;
                         
                         else
                         
                            alert('Server error');
                            return false;
                        
                       
                );
            
            return false;
        );

【讨论】：

问题是如何重定向到新页面。这不会重定向到新页面【参考方案8】：

我认为你应该构造并填写一个隐藏的 method=POST action="YOUR_URL" 表单并提交，

【讨论】：

【参考方案9】：

没有办法这样做。

即使是a 元素也会击中GET。

您可以做一个 Ajax 请求来发布并在 on-success 中使用 window.open()。

【讨论】：

【参考方案10】：

使用 jQuery 发布数据并重定向到您想要的位置，如下所示：

$.ajax(
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data)
      window.location = data;
  
);

如果没有数据可传递到您要发布到的页面，您可以删除数据：'formValue=someValue'。

【讨论】：

【参考方案11】：

嗯...使用 AJAX Jquery：

> $.ajax(
>                       type: "POST",
>                       url: "www.example.com/the_page_I_post_to.php",
>                       data: $('yourform').serialize(),//sent data
>                       success: function(msg) 
>                           alert("posted !");
>

【讨论】：

JQuery $.ajax 实际上并没有重定向。它在后台发送 XHR。 @Fernando 发布的答案根据所要求的内容效果最佳。

以上是关于如何使用Javascript通过'POST'方法重定向？的主要内容，如果未能解决你的问题，请参考以下文章

重定向处理时如何通过 $_POST 将表单错误发送回表单

如何避免表单重复提交

如何使用 JQuery 重定向，加载另一个页面但在请求中发送了一些 POST 参数？

如何在 Django 2 中的 POST 方法后重定向到成功

使用 JavaScript/jQuery 在重定向上发送 POST 数据？ [复制]

发送 Javascript 推送通知 - 在表单 POST 和 URL 重定向之后