build立一个链接使用POST而不是GET

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

您可以使用隐藏的input创build一个表单,该表单包含要发布的值,将表单的操作设置为目标url,以及要发布的表单方法。 然后,当你的链接被点击时,触发一个提交表单的JS函数。

在这里看一个例子。 这个例子使用纯粹的JavaScript,没有jQuery – 如果你不想安装比已有的更多的东西,你可以select这个。

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

你不需要这个JavaScript。 只是想澄清一下,因为从发布这个答案的时候起,这个问题的所有答案都涉及到JavaScript的使用。

通过创build一个包含要提交的数据的隐藏字段的表单,然后将表单的提交button样式化为链接,您可以轻松地使用纯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> 

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

JQuery Post

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

 <a href="javascript:DoPost()">Click Here</A> 

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

据我所知,所要求的代码应该只改变普通超链接的工作方式:应该使用POST方法而不是GET 。 直接的影响是:

  1. 当链接被点击时,我们应该重新加载标签到href的url
  2. 由于该方法是POST,所以我们在加载的目标页面的URL中应该没有查询string
  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> 

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

HTML

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

JavaScript的

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

这是不可能的使用原始的HTML,虽然你可以使用jQuery添加一个点击事件处理程序的链接,可以使用post函数来发布POST。

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

由于我花了很多时间来理解所有这些答案,而且所有这些答案都有一些有趣的细节,所以这里是最终为我工作的组合版本,我更喜欢它的简单性。

我的方法是再次创build一个隐藏的表单,并通过单击页面中其他地方的链接来提交它。 表单将放置在页面正文的哪个位置并不重要。

表单的代码:

 <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"将会创build一个不会显示的fild,但是它的数据会被传送给action( 参见W3C )。 我明白这是最简单的inputtypes。

链接代码:

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

描述:

href只是针对同一个页面 。 但在这种情况下,这并不重要,因为return false将停止浏览器跟踪链接。 当然,你可能想改变这种行为。 在我的具体情况中,最后的行动包含redirect。

onclick被用来避免使用mplungjan指出的 href="javascript:..."$('#myHiddenFormId').submit(); 被用来提交表单(而不是定义一个函数,因为代码非常小)。

这个链接看起来和其他的<a>元素完全一样。 实际上,您可以使用任何其他元素而不是<a> (例如<span>或图像)。

你可以使用这个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/

检查它会帮助你

 $().redirect('test.php', {'a': 'value1', 'b': 'value2'});