Answers:
您使用隐藏的输入创建表单,这些输入包含要发布的值,将表单的操作设置为目标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>
GET
?我们get
没有表格,不是吗?
您不需要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可能会有所不同,具体取决于网站上常规链接的样式。
您可以使用javascript函数。如果您决定使用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('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
<a href="whyjavascript.html" id="postIt">Click Here</a>
,并有$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
这是一个古老的问题,但是没有一个答案能完全满足要求。所以我要添加另一个答案。
据我了解,所请求的代码应仅对普通超链接的工作方式进行更改:POST
应使用方法代替GET
。直接的影响是:
href
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>
另一个工作示例,使用类似的方法发布:创建一个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();
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)。
您可以使用此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/)中的示例
正如许多文章中提到的那样,这不是直接可行的,但是一种简单而成功的方法如下:首先,我们在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>
选中它会为您提供帮助
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});