我不确定这是否可能。但我想知道是否有人知道如何让超链接传递一些变量并使用 POST(如表单)而不是 GET。
使用 POST 而不是 GET 创建链接
IT技术
javascript
html
http
2021-01-21 11:57:38
6个回答
为此,您不需要 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 可能会有所不同,具体取决于您网站上的常规链接的样式。
您创建一个带有隐藏输入的表单,其中包含要发布的值,将表单的操作设置为目标 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>
您可以使用 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
应该使用该方法而不是GET
. 直接影响将是:
- 当链接被点击时,我们应该将标签重新加载到
href
- 由于方法是POST,我们加载的目标页面的URL中应该没有查询字符串
- 该页面应该通过以下方式接收参数(名称和值)中的数据
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>
另一个工作示例,使用类似的方法发布:创建一个 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();
其它你可能感兴趣的问题