JavaScript：发送POST请求并重定向到响应

Question

我有一个带有onclick的图片。当点击事件触发时，我想发送一个HTTP POST请求并让window.location重定向到POST响应。我该如何实现？

- JamesBrownIsDead

Answer 1

只需将按钮绑定到表单元素的提交方法上，重定向自然会发生。

<script type='text/javascript'>
 function form_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script>

<form method='post' action='your_post_url.html' id='the_form'>
  <input type='hidden' value='whatever'>
</form>

<span id='subm' onclick='form_send()'>Submit</span>

- Mark Snidovich

---

那无法处理从响应体中获取重定向地址的情况。 - friedo

啊哈，我错过了问题的那一部分。它本可以表达得更清楚些。 - Mark Snidovich

我同意这个问题有一点模糊不清。即使我的回答得到了3个赞，我也不确定它是否正确地回答了问题。 (+1 以弥补负评) - Daniel Vassallo

谢谢Daniel；一开始我不明白你为什么建议使用XHR，但重新阅读后，我认为这正是提问者想要的，即从POST中获取位置作为响应并转到那里，因此需要XHR。如果提问者提供更多细节，我感觉还有其他解决方法。 - Mark Snidovich

Answer 2

假设你需要异步发送POST请求，你可能想要检查下面的示例，以帮助你朝正确的方向前进：

<img src="my_image.png" onClick="postOnClick();">

你需要一个JavaScript函数来提交异步HTTP POST请求并将浏览器重定向到从HTTP响应中接收到的URL。 你可以使用 XMLHttpRequest 来进行这样的异步调用，就像以下示例中一样：

function postOnClick()
{
    var http = new XMLHttpRequest();

    var params = "arg1=value1&arg2=value2";

    http.open("POST", "post_data.php", true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            window.location = http.responseText;
        }
    }

    http.send(params);
}

请注意，要想实现真正跨浏览器的XMLHttpRequest调用，您可能需要使用符合标准的跨浏览器XMLHttpRequest实现，如XMLHttpRequest.js，除非您正在使用一些JavaScript框架，如jQuery、Prototype、YUI、ExtJS等。

另外，请注意，上述方法仅在您向同一域中托管的脚本发布时才有效，否则将违反同源策略，现代Web浏览器将拒绝发送该请求。

- Daniel Vassallo

---

这个不起作用。http.responseText是HTML文档（post_data.php）的正文。你不能重定向到一个HTML字符串。 - JamesBrownIsDead

@JamesBrownIsDead：这取决于你从服务器端脚本返回什么。如果你返回简单的纯文本，http.responseText将只包含URL。你的脚本为什么要返回HTML？有特别的原因吗？ - Daniel Vassallo

Answer 3

在使用时，应该避免使用window.location = http.responseText，而应该使用以下代码：

http.onreadystatechange = function() {
  if (http.readyState == 4 && http.status == 200) {
    document.open();
    document.write(http.responseText);
  }
}

document.open()清除页面上当前的内容，document.write()将响应的HTML代码插入到您的页面中。

- RonnyR

Answer 4

您可以使用我制作的这个函数：

function redirect_by_post(purl, pparameters, in_new_tab) {
    pparameters = (typeof pparameters == 'undefined') ? {} : pparameters;
    in_new_tab = (typeof in_new_tab == 'undefined') ? true : in_new_tab;

    var form = document.createElement("form");
    $(form).attr("id", "reg-form").attr("name", "reg-form").attr("action", purl).attr("method", "post").attr("enctype", "multipart/form-data");
    if (in_new_tab) {
        $(form).attr("target", "_blank");
    }
    $.each(pparameters, function(key) {
        $(form).append('<input type="text" name="' + key + '" value="' + this + '" />');
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    return false;
}

$('#btn').button().click(function() {
    redirect_by_post('http://pamppi.info/jotform-testing/thankyou/postvars.php', {
        variable1: 'Carlos',
        variable2: 'Garcia'
    }, true);
});

- cgarciagl

---

最好把你的代码粘贴在这里，以便查看和讨论。 - Martin Borthiry

Answer 5

使用jQuery将数据提交并重定向到所需位置，如下所示：

jQuery

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

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

- Naeem Sarfraz

---

不如预期工作。'data'检索请求的响应，在这种情况下是文件'receivedata.asp'，而不是url。 - reefaktor

Answer 6

使用 input 类型为 image。

<form action="someUrl.html" method="POST">
    <input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>

当点击图片时，您将被重定向到“someUrl.html”，并向其发送一篇文章

- Mic