创建链接使用POST而不是GET

Ell*_*iot 190 html javascript http

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

Aje*_*i32 296

你不需要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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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

  • 这个答案值得更多的赞成. (27认同)
  • 我只能投票一次.这几乎与99.728%的HTML问题最终会与Javascript或jQuery问题混淆的事实一样令人难过. (6认同)
  • 同意.我需要一种方法在电子邮件中这样做,所以JS对我来说不是一个选择.这应该完美 (4认同)
  • 但是按钮,即使其样式像超链接,也不是超链接,对吧?用户如何通过浏览器上下文菜单在新选项卡中打开发布结果? (3认同)
  • 这肯定是使用看起来像链接的按钮的简单方法,但它实际上是硬编码.您必须确切地知道此按钮将适用的条件,并为每种情况明确设置它们.我认为基于JS/JQuery的答案更通用,因为它们使用链接元素本身(或任何元素). (2认同)
  • @Ajedi32 抱歉,我的评论不是很清楚:我主要是想说这个按钮的样式专门设计为看起来像一个 &lt;a&gt; 元素。但是,如果您将按钮放在其他样式不同的 &lt;a&gt; 元素周围,例如在页面的不同部分,您必须为按钮复制 &lt;a&gt; 的所有 css 规则,以创建悬停、访问等规则。否则它当然可以完成这项工作,但它看起来很难看。使用其他解决方案,您根本不需要更改任何 CSS,您只需获得一个 &lt;a&gt; 元素,就像您已经拥有的所有其他元素一样。当然纯 HTML 也有一些优点。 (2认同)

Pal*_*tir 91

您创建一个包含隐藏输入的表单,该表单包含要发布的值,将表单的操作设置为目标URL,以及要发布的表单方法.然后,当您单击链接时,触发提交表单的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>
Run Code Online (Sandbox Code Playgroud)

  • 为什么这是公认的答案?问题特别要求*使用POST(如表格)而不是GET*,但这个答案说"*设置动作到目标网址和方法获取*". (15认同)
  • 没有 JavaScript 就无法让 A 发送 POST。只有表单可以做到这一点(或者 AJAX 或 JS)。所以这是一个解决方法:创建一个隐藏表单,并让A链接通过JS提交它。 (2认同)
  • 我明白了。我不明白的是:我们麻烦创建一个隐藏的表单以进行POST,但是创建表单后,*为什么*您建议将方法设置为`GET`?我们有没有表格的“获取”,不是吗? (2认同)
  • 你是对的。那是一个错误,但是OP仍然可以正确地实现它(可能是因为包含的链接更加清晰)。感谢您指出。我完全改了一下。 (2认同)
  • 我更新了你的答案,使用更现代的方法.如果您不同意,请随意回滚此编辑. (2认同)
  • 没有理由在此过程中涉及Javascript。为什么这是公认的答案? (2认同)

AGo*_*ame 45

你可以使用javascript函数.如果你决定使用它,JQuery有一个很好的post函数:

JQuery Post

<script language="javascript"> 

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

</script>
Run Code Online (Sandbox Code Playgroud)


<a href="javascript:DoPost()">Click Here</A> 
Run Code Online (Sandbox Code Playgroud)

  • `$ .post('page.php',{param:1},function(){window.location.href ='page'.php'});` (6认同)
  • 这确实按要求发出POST请求,但我无法使用它,因为我仍然需要转到"Whatever.php"位置. (5认同)

Maj*_*our 24

这是一个老问题,但没有一个答案满足请求.所以我正在添加另一个答案.

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

  1. 单击链接后,我们应该将选项卡重新加载到该URL 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>
Run Code Online (Sandbox Code Playgroud)

要查看结果,请将以下内容保存为您在上面保存的目录中的reflector.php.

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

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
Run Code Online (Sandbox Code Playgroud)


Qua*_*nnt 11

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

HTML

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

document.forms["myForm"].submit();
Run Code Online (Sandbox Code Playgroud)


小智 11

除了使用 JavaScript,您还可以使用发送隐藏表单的标签。非常简单且小的解决方案。该标签可以位于 html 中的任何位置。

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>
Run Code Online (Sandbox Code Playgroud)