使用POST而不是GET创建链接

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

361600 次浏览
小开
最佳答案

你创建一个带有隐藏输入的表单，其中包含要发布的值，将表单的行动设置为目标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函数。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>
小开

另一个工作示例，使用类似的方法张贴:创建一个html表单，使用javascript来模拟张贴。这做了两件事:发布数据到一个新的页面，并在一个新的窗口/选项卡中打开它。

超文本标记语言

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

JavaScript

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

可以使用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/)中的一个例子

小开

这是一个老问题，但没有一个答案能完全满足要求。所以我又增加了一个答案。

据我所知，请求的代码应该只对正常超链接的工作方式做一个更改:应该使用POST方法而不是GET。其直接影响将是:

  1. 当链接被单击时，我们应该重新加载选项卡到href的url
  2. 因为方法是POST，所以我们加载的目标页面的URL中不应该有查询字符串
  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>
小开

不需要JavaScript。只是想说清楚一点，因为在这个答案发布的时候，这个问题的答案中的所有涉及到以某种方式使用JavaScript。

你可以很容易地做到这一点:创建一个包含你想要提交的数据的隐藏字段的表单，然后样式化表单的提交按钮，使其看起来像一个链接。

例如:

.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可能会根据站点上常规链接的样式而有所不同。

小开

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"将创建一个不会显示的字段，但其数据将以任何方式传输给操作(看到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>(例如<span>或图像)。

小开

检查这个，它会帮助你

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
小开
正如在许多帖子中提到的，这是不可能直接实现的，但一个简单而成功的方法如下: 首先，我们在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>
小开

我建议一种更动态的方法，没有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()
})
小开

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


提交答案