从 <A> 标签发布

Question

是否可以仅通过

<a>

标签进行 POST？我知道锚标记通常仅用于 GET，并且我知道我可以使用 javascript 来执行此操作（例如在

Answer 1

不完全是，不。理想情况下，将按钮设置为看起来像链接：

.link-button {
  background: none;
  border: none;
  color: blue;
  cursor: pointer;
  display: inline;
  font: inherit;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

/* continue with :active and :focus-visible */

<form method="POST">
  <button class="link-button">Do the thing</button>
</form>

使用“真实链接”的唯一方法是使用 JavaScript 处理其

click

事件：

<form action="theUrl" method="POST">
  <a href="javascript:;" onclick="this.parentNode.submit()">Do the thing</a>
</form>

但这只是标签名称中的“真实链接”——它没有正确链接到任何内容。当没有 JavaScript 支持、访问性较差、具有所有链接功能（复制链接、在新选项卡中打开）但它们实际上不起作用等时，它也不会优雅地降级。

Answer 2

仅使用 HTML 无法实现

POST

a

元素。

从这个 DTD 片段可以看出（HTML 4.01 规范）：

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

没有属性可以控制是否使用

POST

或

GET

与

a

元素。

如果你想滥用语义，你必须编写脚本。

Answer 3

基本上，您不能对 POST 请求使用锚标记。然而，有一个简单的技巧可以实现这一点。

<form id="myform" method="post" action="target.html"></form>
<a onclick="document.getElementById('myform').submit();">Submit to action</a>

经过测试，工作正常。

Answer 4

您可以使用 CSS 使

<input type="submit">

看起来像超链接。

Answer 5

如果它对某人有用：

<a href="/your-route"
    onclick="event.preventDefault();
    document.getElementById('magic-form').submit();">
    Magic Action
</a>
<form id="magic-form" action="/your-route" 
      method="POST" style="display: none;">
      {{ csrf_field() }} <!-- from your framework -->
      <input type="hidden" name="field1" value="value1" />
      <!-- other fields -->
</form>

Answer 6

简单回答：不。你需要使用 javascript 来做这种事情；因为当您执行 POST 时，您所做的就是发送 HTTP 请求中的数据。使用 get，您只需将其作为字符串的一部分发送（因此您可以通过

href

值来完成此操作）。

Answer 7

不，显然没有 JavaScript Submit() 就不行。

Answer 8

不，如果不使用脚本就无法做到这一点。尽管您可以使用 CSS 来设置标准“提交”按钮的样式，使其外观和行为更像标签。

Answer 9

您可以使用 htmx https://htmx.org/attributes/hx-post/

例如：

<script src="https://unpkg.com/[email protected]" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>

<a hx-post="/account/enable"/>Some text</a>

Answer 10

我想到的两种方法是使用 JavaScript（正如你所说）或通过服务器描述。

您基本上将 GET 请求（带有 A）发送到某个服务器文件，这会将 GET 变量更改为 POST，然后立即重新提交（重定向位置）。 但我认为这会弄乱推荐人统计数据。

Answer 11

您应该添加 data-method="post"

例如：

<a href="/some-link" data-method="post">Logout</a>