JavaScript：发送 POST，重定向到响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2224359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Sending POST, redirecting to response
提问by JamesBrownIsDead
I have an image with an onclick. When the click event fires, I want to send an HTTP POST and have the window.location redirect to the response to the POST. How can I do that?
我有一个带有 onclick 的图像。当点击事件触发时，我想发送一个 HTTP POST 并将 window.location 重定向到对 POST 的响应。我怎样才能做到这一点？
回答by Mark Snidovich
Just bind the button to the submit method of a form element, and the redirect will happen naturally.
只需将按钮绑定到表单元素的提交方法，重定向就会自然发生。
<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>
回答by Daniel Vassallo
Assuming you require to send the POST request asynchronously, you may want to check the example below to get you going in the right direction:
假设您需要异步发送 POST 请求，您可能需要检查下面的示例以帮助您朝着正确的方向前进：
<img src="my_image.png" onClick="postOnClick();">
Then you require a JavaScript function that submits an asynchronous HTTP POST request and redirects the browser to a URL received from the HTTP response. You should be able to use XMLHttpRequestfor such an asynchronous call, as in the following example:
然后，您需要一个 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);
}
Note that for a truly cross-browser XMLHttpRequestcall, you may want to use a standard-compliant cross-browser XMLHttpRequest implementation like XMLHttpRequest.js, unless you are using some JavaScript framework like jQuery, Prototype, YUI, ExtJS, et al.
请注意，对于真正的跨浏览器XMLHttpRequest调用，您可能希望使用符合标准的跨浏览器 XMLHttpRequest 实现，例如XMLHttpRequest.js，除非您使用一些 JavaScript 框架，例如jQuery、Prototype、YUI、ExtJS等。
In addition, also note that the above will only work if you are posting to a script hosted within the same domain, otherwise you will be violating the same-origin policyand modern web browsers will refuse to send the request.
此外，还请注意，以上仅当您发布到托管在同一域中的脚本时才有效，否则您将违反同源策略并且现代 Web 浏览器将拒绝发送请求。
回答by RonnyR
Instead of window.location = http.responseTextuse the following:
而不是window.location = http.responseText使用以下内容：
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
document.open();
document.write(http.responseText);
}
}
document.open()clears the current content of the page and document.write()inserts the response html code into your page.
document.open()清除页面的当前内容document.write()并将响应 html 代码插入到您的页面中。
回答by cgarciagl
回答by Naeem Sarfraz
Using jQuerypost the data and redirect to your desired location like so:
使用jQuery发布数据并重定向到您想要的位置，如下所示：
$.ajax({
type: 'POST',
url: 'receivedata.asp',
data: 'formValue=someValue',
success: function(data){
window.location = data;
}
});
You could remove the data: 'formValue=someValue',if there is no data to pass to the page you want to post to.
data: 'formValue=someValue',如果没有要传递到要发布到的页面的数据，您可以删除。
回答by Mic
Use a input type image.
使用输入类型图像。
<form action="someUrl.html" method="POST">
<input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>
When clicking on the image you will be redirected to "someUrl.html" and a post will be sent to it
单击图像时，您将被重定向到“someUrl.html”，并向其发送帖子
