使用 POST 而不是 GET 创建链接
2022-08-30 00:31:04
我不确定这是否可能。但是我想知道是否有人知道如何使超链接传递一些变量并使用POST(如表单)而不是GET。
我不确定这是否可能。但是我想知道是否有人知道如何使超链接传递一些变量并使用POST(如表单)而不是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 可能会有所不同,具体取决于您网站上常规链接的样式。
创建一个包含要发布的值的隐藏输入的表单,将表单的操作设置为目标 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>