使用 POST 而不是 GET 创建链接

IT技术 javascript html http
2021-01-21 11:57:38

我不确定这是否可能。但我想知道是否有人知道如何让超链接传递一些变量并使用 POST(如表单)而不是 GET。

6个回答

为此,您不需要 JavaScript。只是想说清楚,因为在发布此答案时,该问题的所有答案都涉及以某种方式使用 JavaScript。

您可以使用纯 HTML 和 CSS轻松完成此操作,方法是创建一个带有包含要提交的数据的隐藏字段的表单,然后将表单的提交按钮样式化为看起来像一个链接。

例如:

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}
<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>

您使用的确切 CSS 可能会有所不同,具体取决于您网站上的常规链接的样式。

我只能投票一次。这几乎与 99.728% 的 HTML 问题最终会与 Javascript 或 jQuery 问题混淆的事实一样令人难过。
2021-03-13 11:57:38
这无疑是一种使用看起来像链接的按钮的简单方法,但它实际上是硬编码的。您必须确切地知道此按钮将适用的条件并为每种情况明确设置它们。我认为基于 JS/JQuery 的答案更通用,因为它们使用的是链接元素本身(或任何元素)。
2021-03-15 11:57:38
@Ajedi32 抱歉,我的评论不是很清楚:我主要是想说这个按钮的样式专门设计为看起来像一个 <a> 元素。但是,如果您将按钮放在其他样式不同的 <a> 元素周围,例如在页面的不同部分,您必须为按钮复制 <a> 的所有 css 规则,以创建悬停、访问等规则。否则它当然可以完成这项工作,但它看起来会很丑陋。使用其他解决方案,您根本不需要更改任何 CSS,您只需获得一个 <a> 元素,就像您已经拥有的所有其他元素一样。当然纯 HTML 也有一些优点。
2021-04-03 11:57:38
同意。我需要一种在电子邮件中执行此操作的方法,因此 JS 对我来说不是一个选择。这应该完美地工作
2021-04-06 11:57:38
@MakisH 如果您需要能够根据页面上的某些任意条件动态更改您提交的数据,那么是的,您将需要 JavaScript。尽管对于使用 GET 的常规链接与使用 POST 的“链接”一样多,但确实如此。
2021-04-07 11:57:38

您创建一个带有隐藏输入的表单,其中包含要发布的值,将表单操作设置为目标 url,并将表单方法设置为post然后,当你的链接被点击时,触发一个提交表单的 JS 函数。

参见这里,例如。此示例使用纯 JavaScript,没有 jQuery — 如果您不想安装任何已有的东西,您可以选择此选项。

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>
@shacker 因为这两个答案都不完美。如果您已经在使用JS(可能是 OP),那么这比尝试使用 CSS 将按钮重新装饰为链接并button在 SuperBrowser V1.2 发布时发现您错过了取消设置样式要好得多。
2021-03-17 11:57:38
我更新了您的答案以使用更现代的方法。如果您不同意,请随时回滚此编辑。
2021-03-28 11:57:38
您可以使用类似的策略,将表单设置为display:none;页面上的其他位置。
2021-03-28 11:57:38
没有理由在此过程中涉及 Javascript。为什么这是公认的答案?
2021-03-29 11:57:38
如果没有 javascript,你就不能发送 A POST。只有表单可以做到这一点(或者 AJAX 或 JS)。所以这是一个解决方法:创建一个隐藏的表单,并让 A 链接通过 JS 提交它。
2021-04-06 11:57:38

您可以使用 javascript 函数。如果您决定使用 JQuery,它内置了一个很好的 post 函数:

jQuery 帖子

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>


<a href="javascript:DoPost()">Click Here</A> 
@mplungjan 引入与其他推荐一样的推荐以避免混淆内容/行为。当在预期范围之外的情况下提出建议时,它开始表现为硬性规则。您给出的示例似乎更进一步,只是为了“规则”安全方面,因此将来没有人可以责怪程序员,但是这种安全是以可读性和意义为代价实现的。这只是另一个务实的开发人员的表现,但我相信你不是那个意思。
2021-03-19 11:57:38
@Menol 我说:不推荐。- 不是“永远不要使用”。如果你真的想要,你可以做到<a href="whyjavascript.html" id="postIt">Click Here</a>并拥有$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
2021-03-20 11:57:38
这确实按照要求发出 POST 请求,但我无法使用它,因为我仍然需要转到“Whatever.php”位置。
2021-03-26 11:57:38
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
2021-03-31 11:57:38
@mplungjan href 说明链接所指的位置,而我同意混淆行为和内容是错误的,在这种情况下,javascript参考。换句话说,“当您单击链接时,它将使用 JavaScript 执行回发”。这比绑定点击事件更有意义。像“永远不要在 href 中使用 javascript”这样的硬性规则与任何其他不良做法一样糟糕。
2021-04-03 11:57:38

这是一个老问题,但没有一个答案完全满足要求。所以我要添加另一个答案。

据我了解,所请求的代码应该只对普通超链接的工作方式进行一项更改:POST应该使用方法而不是GET. 直接影响将是:

  1. 当链接被点击时,我们应该将标签重新加载到 href
  2. 由于方法是POST,我们加载的目标页面的URL中应该没有查询字符串
  3. 该页面应该通过以下方式接收参数(名称和值)中的数据 POST

我在这里使用 jquery,但这可以通过本机 apis 来完成(当然更难更长)。

<html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

并查看结果,将以下内容另存为reflector.php 保存在与上述相同的目录中。

<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>

另一个工作示例,使用类似的方法发布:创建一个 html 表单,使用 javascript 来模拟发布。这有两件事:将数据发布到新页面并在新窗口/选项卡中打开它。

HTML

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

JavaScript

document.forms["myForm"].submit();