我不确定这是否可行。但我想知道是否有人知道如何使一个超链接传递一些变量和使用POST(像一个表单)而不是GET。
当前回答
正如许多帖子所提到的,这是不可能直接实现的,但一个简单而成功的方法如下: 首先,我们在html页面的主体中放入一个表单,它没有任何提交按钮,而且它的输入是隐藏的。 然后我们使用javascript函数来获取数据并发送表单。这种方法的优点之一是重定向到其他页面,这取决于服务器端代码。 代码如下: 现在在任何你需要一个to be in "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>
其他回答
可以使用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/)中的一个例子
您可以创建一个带有隐藏输入的表单,其中包含要发布的值,将表单的动作设置为目标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>
不需要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可能会根据站点上常规链接的样式而有所不同。
这是一个老问题,但没有一个答案能完全满足要求。所以我又增加了一个答案。
据我所知,请求的代码应该只对普通超链接的工作方式做一个更改:应该使用POST方法而不是GET。其直接影响将是:
当链接被点击时,我们应该重新加载标签到href的url 因为方法是POST,所以我们加载的目标页面的URL中不应该有查询字符串 该页应该通过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>
除了使用javascript,还可以使用标签发送隐藏表单。非常简单和小的解决方案。标签可以在html中的任何地方。
<form style="display: none" action="postUrl" method="post"> <button type="submit" id="button_to_link"> </button> . > < /形式 <label style="text-decoration: underline" for="button_to_link">张贴的链接</label>
推荐文章
- 改变引导输入焦点蓝色发光
- 我如何使一个div上的滚动条只在必要时可见?
- 克隆对象没有引用javascript
- 验证字符串是否为正整数
- HTML5 iFrames的替代方案
- 如何获得一个键/值JavaScript对象的键
- CSS:控制项目符号和<li>之间的空格
- 什么时候JavaScript是同步的?
- HTML属性的长度有限制吗?
- 撇号的HTML代码
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById