jQuery 通过链接导航到具有发布请求的另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17378619/
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
navigate to another page with post request through link
提问by Ravi
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function DoPost(){
$.post("index.html", { name: "John", time: "2pm" } );
}
</script>
</head>
<body>
<a href="javascript:DoPost()">GO</a>
</body>
</html>
I made function and trying to call that function, inside that function I mentioned url and data as mentioned here. But, It's not working for me.
我创建了函数并尝试调用该函数，在该函数中我提到了此处提到的 url 和 data 。但是，它对我不起作用。
NOTE :Even I mentioned in my post title, then also I want to clarify that, I want to navigate to another page using POSTmethod through simple hyperlink.
注意：即使我在帖子标题中提到，然后我也想澄清一下，我想POST通过简单的超链接使用方法导航到另一个页面。
采纳答案by Saturnix
Create an html form with all the data you need to send and specify as action the page you need to forward the user.
使用您需要发送的所有数据创建一个 html 表单，并将您需要转发用户的页面指定为操作。
<form method="post" id="theForm" action="REDIRECT_PAGE.php">
Then put some hidden fields in that form.
然后在该表单中放置一些隐藏字段。
<input type="hidden" name="name" value="John">
<input type="hidden" name="time" value="2pm">
</form>
Wrap this inside of your doRedirect function and the redirect will work while correctly submitting your POST data.
将此包装在您的 doRedirect 函数中，重定向将在正确提交您的 POST 数据时工作。
document.getElementById('theForm').submit()
As a side note, you may want to redirect the user to a .php page not a .html one if you need to read POST data. This depends on your server configuration but, by default, I don't think you can run PHP code inside of a .html file.
作为旁注，如果您需要读取 POST 数据，您可能希望将用户重定向到 .php 页面而不是 .html 页面。这取决于您的服务器配置，但默认情况下，我认为您不能在 .html 文件中运行 PHP 代码。
回答by robbie
I know this question is almost 4 years old and there is already an accepted answer, but I would like to provide an alternative solution as well as point out your mistake.
我知道这个问题已经有将近 4 年的历史了，并且已经有一个可以接受的答案，但我想提供一个替代解决方案并指出您的错误。
Part 1: The Solution
第 1 部分：解决方案
The conventional solution for navigating with a POSTrequest is a form, which the accepted answer uses. I will build on top of this by presenting a solution to programmatically create forms using DOM.
使用POST请求进行导航的传统解决方案是接受的答案使用的表单。我将在此基础上提出一个使用 DOM 以编程方式创建表单的解决方案。
var payload = {
name: 'John',
time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden'; // no user interaction is necessary
form.method = 'POST'; // forms by default use GET query strings
form.action = 'index.html';
for (key in Object.keys(payload)) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input); // add key/value pair to form
}
document.body.appendChild(form); // forms cannot be submitted outside of body
form.submit(); // send the payload and navigate
I used index.htmlas per your original code, but I would take the accepted answer's advice and use PHP to accept and process the POSTdata.
我index.html按照您的原始代码使用，但我会接受已接受答案的建议并使用 PHP 来接受和处理POST数据。
Part 2: The Problem
第 2 部分：问题
The main problem with your original solution is that it used $.post, a helper function built on top of $.ajax. AJAX is meant to be used when retrieving data from a server and using it within current page, rather than navigating to another page.
您的原始解决方案的主要问题是它使用$.post了一个构建在$.ajax. AJAX 旨在用于从服务器检索数据并在当前页面中使用它，而不是导航到另一个页面。
回答by IamMHussain
This should work fine. Similar to one answer, but a better one.
这应该可以正常工作。类似于一个答案，但更好。
var payload = {
name: 'John',
time: '2pm'
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = link;
$.each(Object.keys(payload), function(index, key) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input)
});
document.body.appendChild(form);
form.submit();
回答by ihorsl
function js_navigate_with_post(js_url, js_post_params)
{
var js_html='';
js_html += "<form id='js_navigate_with_post' method='post' action='"+js_url+"'>\n";
js_html += "<input type='hidden' name='js_navigate_with_post' value='true'>\n";
for (var js_key in js_post_params) {
if (js_post_params.hasOwnProperty(js_key))
{
js_html += "<input type='hidden' name='"+js_key+"' value='"+js_post_params[js_key]+"'>\n";
}
}
js_html += "</form>\n";
jQuery('body').append(js_html);
jQuery('#js_navigate_with_post').submit();
}
回答by Ravi
Finally, I did it, but not exactly as I wanted. But it is helpful for me. Now, sharing for others
最后，我做到了，但并不完全是我想要的。但这对我很有帮助。现在，分享给他人
<html>
<head>
<script type="text/javascript">
function DoPost() {
document.postlink.submit();
}
</script>
</head>
<body>
<a href="javascript:DoPost()">GO</a>
<form action="demo.php" name="postlink" method="post">
<input type="hidden" name="name" value="this is my POST data">
</form>
</body>
</html>
回答by Dennis Tsoumas
What do you mean it is not working? How can it work when you post results to a simple .htmlpage?
你的意思是它不起作用？当您将结果发布到一个简单的.html页面时，它如何工作？
The $.postfunction is a shorthand for $.ajax, which I always found easier to read and debug! Please have a look again in the link that you provided and see the examples in the bottom of the page!
该$.post函数是 的简写$.ajax，我总是发现它更易于阅读和调试！请再次查看您提供的链接，并查看页面底部的示例！
For example:
例如：
$.post("test.php", { name: "John", time: "2pm" } );
Update: No, it shouldn't go to the index.html. What your code actually does is sending post variables to an .htmlpage, so basically it doesn't do that much. That said, you can do what you want with many different solutions, see two of them below:
更新：不，它不应该转到index.html. 你的代码实际上做的是将 post 变量发送到.html页面，所以基本上它不会做那么多。也就是说，您可以使用许多不同的解决方案来做您想做的事情，请参阅下面的两个：
You can either add an
doneevent on the$.postfunction, for example:$.post("test.php", { name: "John", time: "2pm" } ).done(function() { alert("Success, do the redirection here!"); });Or maybe maybe redirect using get variables instead of post ones? for example:
window.location = "index.php?username=blah&pass=blah";and deal with them in the php page.
您可以
done在$.post函数上添加一个事件，例如：$.post("test.php", { name: "John", time: "2pm" } ).done(function() { alert("Success, do the redirection here!"); });或者也许可以使用 get 变量而不是 post 变量重定向？例如：
window.location = "index.php?username=blah&pass=blah";并在php页面中处理它们。
ps. the above solution obviously is for testing purposes, if you go that way you will have somehow to encrypt your data!
附：上面的解决方案显然是为了测试目的，如果你这样做，你将有办法加密你的数据！
