使链接使用POST而不是GET


204

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


HTML无法做到这一点。JavaScript可以捕获链接上的click事件,并且如果您不能更改HTML则可以做您想做的事情,而CSS可以像链接一样设置按钮样式(如果只是外观问题)。
sylvain 2015年

Answers:


98

您使用隐藏的输入创建表单,这些输入包含要发布的值,将表单的操作设置为目标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>

16
为什么这是公认的答案?该问题专门要求使用POST(如表单)而不是GET,但是此答案表示“ 将操作设置为目标url和获取方法 ”。
Majid Fouladpour 2014年

3
我明白了。我不明白的是:我们麻烦创建一个隐藏的表单以便可以POST,但是在创建表单之后,为什么建议将方法设置为GET?我们get没有表格,不是吗?
Majid Fouladpour 2014年

3
你是对的。那是一个错误,但是以某种方式OP仍然可以正确地执行它(可能是因为包含的链接更加清晰)。感谢您指出。我完全改了一下。
Palantir 2014年

3
我更新了您的答案,以使用更现代的方法。如果您不同意,请随时回滚此编辑。
米哈尔Perłakowski

3
没有理由在此过程中涉及Javascript。为什么这是公认的答案?
shacker

322

您不需要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可能会有所不同,具体取决于网站上常规链接的样式。


4
同意 我需要一种在电子邮件中执行此操作的方法,因此JS对我而言不是太多选择。这应该工作得很好
SynackSA 2016年

7
我只能对此投票一次。这几乎与所有HTML问题中的99.728%最终会与Javascript或jQuery问题相混淆的事实一样可悲。
拉布

3
当然,这是一种使用看起来像链接的按钮的简单方法,但实际上是硬编码的。您必须确切知道此按钮将要存在的条件,并为每种情况明确设置它们。我认为基于JS / JQuery的答案更为通用,因为它们使用的是link元素本身(或任何一个元素)。
MakisH

2
@ Ajedi32对不起,我的评论不太清楚:我主要是想说这个按钮的样式专门设计为<a>元素。但是,如果将按钮放在其他样式不同的<a>元素周围(例如,在页面的不同部分),则必须为该按钮也复制<a>的所有css规则,以创建悬停,访问等规则。否则,它当然可以胜任工作,但是看起来很难看。使用其他解决方案,您根本不需要更改任何CSS,您只需像已拥有的所有其他元素一样获得一个<a>元素。当然,纯HTML也有一些优点。
MakisH

1
@Robert AFAIK,其他任何建议的解决方案都不能与鼠标中键配合使用。如果您真的想成为一个学究的人,可以说提交带有链接的POST请求是不可能的。您只能使用表单和JavaScript提交POST请求。
Ajedi32 '18

48

您可以使用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> 

5
这确实会按要求发出POST请求,但是我无法使用它,因为我仍然需要转到位置“ Whatever.php”。
克里斯

6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM

1
@mplungjan href指出了链接所指的位置,而我同意混淆行为和内容是错误的,在这种情况下,使用javascript 参考。换句话说,“当您单击链接时,它将使用JavaScript执行回发”。这比绑定click事件具有更多含义。诸如“永远不要在href中使用javascript”之类的硬性规则与任何其他不良做法一样糟糕。
梅诺尔

@Menol我说:不推荐。-不要“永远不要使用”。如果你真的想你可以做<a href="whyjavascript.html" id="postIt">Click Here</a>,并有$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan

1
@mplungjan引入了与其他建议一样的建议,以避免混淆内容/行为。如果在超出预期范围的情况下提出建议,则该建议开始显得很难。您给出的示例似乎只是为了“规则”安全方面而付出了更大的努力,因此将来没有人可以责备程序员,但是这种安全性是以可读性和含义为代价的。对于其他务实的开发人员来说,它就是这样,但我敢肯定您不是那个意思。
梅诺尔

24

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

据我了解,所请求的代码应仅对普通超链接的工作方式进行更改:POST应使用方法代替GET。直接的影响是:

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

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

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

12

另一个工作示例,使用类似的方法发布:创建一个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();

3

HTML + JQuery:使用POST提交隐藏表单的链接。

由于我花了很多时间来理解所有这些答案,并且所有这些答案都有一些有趣的细节,因此,这是最终对我有用的合并版本,我更喜欢它的简单性。

我的方法还是创建一个隐藏的表单,然后单击页面其他位置的链接来提交它。表单将放置在页面正文中的哪个位置都没有关系。

表单的代码:

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

描述:

display: none隐藏的形式。您也可以将其放在div或另一个元素中,然后display: none在元素上进行设置。

所述type="hidden"将创建将不会示出的FILD但其数据将被传输到动作eitherways(见W3C)。我知道这是最简单的输入类型。

链接的代码:

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

描述:

对象href指向同一页面。但是,在这种情况下,这并不重要,因为return false将会阻止浏览器跟踪链接。您可能需要更改此行为。在我的特定情况下,该操作最后包含一个重定向。

onclick使用,以避免使用href="javascript:..."由mplungjan指出。所述$('#myHiddenFormId').submit();用于提交表单(而不是限定的函数,因为代码是非常小的)。

此链接将与其他任何<a>元素完全一样。实际上,您可以使用任何其他元素来代替<a>(例如a <span>或image)。


2

您可以使用此jQuery函数

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

这是jsFiddle(http://jsfiddle.net/S7zUm/)中的示例


@DaoLam代码实际有效。我用lesrefd.free.fr/phpinfo.php替换了phpref中的值,并将表单值传递给该站点。
JSWilson

2

正如许多文章中提到的那样,这不是直接可行的,但是一种简单而成功的方法如下:首先,我们在html页面的正文中放置一个表单,该表单没有用于提交的任何按钮及其输入隐藏。然后,我们使用javascript函数获取数据并发送表单。此方法的优点之一是重定向到其他页面,这取决于服务器端代码。代码如下:现在,在任何需要使用“ POST”方法的地方:

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>

1

我建议采用一种更动态的方法,而无需在页面中进行html编码,请严格将其保留为JS:

$("a.AS-POST").on('click', e => {
  e.preventDefault()
  let frm = document.createElement('FORM')
  frm.id='frm_'+Math.random()
  frm.method='POST'
  frm.action=e.target.href
  document.body.appendChild(frm)
  frm.submit()
})

0

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.