从 <A> 标签发布答案

【问题标题】：POST from an <A> tag从 <A> 标签发布
【发布时间】：2011-09-05 00:48:33
【问题描述】：

是否可以仅从 <a> 标记进行 POST？我知道锚标记通常只用于 GET，而且我知道我可以使用 javascript 来执行此操作（例如在 JavaScript post request like a form submit 中），但对我来说这似乎有点混乱。有没有办法用直接的 HTML 做到这一点？

【问题讨论】：

Make a link use POST instead of GET的可能重复

标签： html post

【解决方案1】：

不是真的，不。但是，您可以执行以下操作：

<form action="theUrl" method="POST">

<input type="hidden" name="param1" value="val" />
<input type="hidden" name="param2" value="val2" />

<a href="#" onclick="this.parentNode.submit()">Go to that link!</a>

</form>

不过，您应该找到更好的方法。这个不会优雅地降级。

【讨论】：

onclick="this.parentNode.submit()" 应该是 onclick="event.preventDefault(); this.parentNode.submit()" 使用jQuery。会更好。
@ThếAnhNguyễn：几乎不重要，因为正在提交表单。同样，理想情况下，您根本不会这样做，而是将按钮设置为看起来像链接。

【解决方案2】：

没有办法只使用 HTML 来 POST a 元素。

从这个 DTD 片段 (HTML 4.01 spec) 可以看出：

<!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 元素一起使用。

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

【讨论】：

我喜欢你用“如果你想滥用语义”的结论，即不应该这样做，应该使用推荐的方式来做这些事情，即使用form 提交数据。

【解决方案3】：

您可以使用 CSS 使 <input type="submit"> 看起来像一个超链接。

【讨论】：

@VGE：是的，但这可以完成他想要做的事情。

【解决方案4】：

基本上，您不能将锚标记用于 POST 请求。但是，有一个简单的技巧可以实现这一点。

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

经过测试，工作正常。

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

显然不是没有 javascript submit()。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我想到的两种方式是使用 JavaScript（如您所说）或通过服务器脚本。

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

【讨论】：

【解决方案10】：

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

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

【讨论】：