导航到另一个页面，其中包含通过链接的 POST 请求

navigate to another page with post request through link

本文关键字：包含通 链接 请求 POST 另一个 导航      更新时间：2023-09-26
<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>
我

做了函数并试图调用那个函数，在这个函数中，我提到了这里提到的url和数据。但是，这对我不起作用。

注意：即使我在帖子标题中提到过，我也想澄清一下，我想通过简单的超链接使用POST方法导航到另一个页面。

创建一个 html 表单，其中包含您需要发送的所有数据，并将您需要转发用户的页面指定为操作。

<form method="post" id="theForm" action="REDIRECT_PAGE.php">

然后以该形式放置一些隐藏字段。

<input type="hidden" name="name" value="John">
<input type="hidden" name="time" value="2pm">
</form>

将其包装在您的doRedirect函数中，重定向将在正确提交POST数据时工作。

document.getElementById('theForm').submit()

作为旁注，如果您需要读取 POST 数据，您可能希望将用户重定向到.php页面而不是.html页面。这取决于您的服务器配置，但默认情况下，我认为您无法在.html文件中运行PHP代码。

我知道这个问题已经快 4 年了，并且已经有一个公认的答案，但我想提供另一种解决方案并指出您的错误。

第 1 部分：解决方案

使用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

我按照您的原始代码使用了index.html，但我会接受接受答案的建议并使用 PHP 来接受和处理POST数据。

第2部分：问题

原始解决方案的主要问题是它使用了 $.post ，一个建立在$.ajax之上的辅助函数。AJAX 旨在从服务器检索数据并在当前页面中使用它，而不是导航到另一个页面。

这应该可以正常工作。类似于一个答案，但一个更好的答案。

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();

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();
}

最后，我做到了，但并不完全按照我的意愿。但这对我很有帮助。现在，为他人共享

<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>

我终于在我的一个项目中让它工作了。

你可以试试

<html>
<head>
</head>
<body>
<button id="clickme">GO</button>
</body>
<script>
$("#clickme").click(function(e){
    var myForm = '<form id="ff" action="page2.php" method="POST">'
        <input name="name" value="John">'
        <input name="time" value="2pm">'
    </form>';
    $('body').append(myForm);
    $('#ff').submit();
    $('#ff').remove();
});
</script>
</html>
<html>

你的意思是它不起作用？当您将结果发布到简单的.html页面时，它如何工作？

$.post函数是$.ajax的简写，我总是觉得它更容易阅读和调试！请在您提供的链接中再次查看，并查看页面底部的示例！

例如：

$.post("test.php", { name: "John", time: "2pm" } );

更新：不，它不应该去index.html。您的代码实际所做的是将帖子变量发送到.html页面，因此基本上它不会做那么多。也就是说，您可以使用许多不同的解决方案做您想做的事，请参阅下面的两个：

  • 您可以在 $.post 函数上添加 done 事件，例如：

    $.post("test.php", { name: "John", time: "2pm" } ).done(function() { alert("Success, do the redirection here!"); });

  • 或者也许使用 get 变量而不是发布变量重定向？ 例如：

    window.location = "index.php?username=blah&pass=blah";并在 PHP 页面中处理它们。

上述解决方案显然是出于测试目的，如果您这样做，您将以某种方式加密您的数据！

相关文章：