为什么 Facebook 使用提交按钮而不仅仅是点赞按钮的链接？

Question

我一直想知道为什么 facebook 使用类似“从按钮提交”而不只是简单的链接来执行操作，以下是类似按钮的代码。

<form rel="async" class="live_184361748268334 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{&quot;seq&quot;:0}" onsubmit="return Event.__inlineSubmit(this,event)">
  <input name="charset_test" value="€,´,€,´,水,Д,Є" type="hidden">
  <input autocomplete="off" name="post_form_id" value="1ef694751d74ce24382cfa6181f1adfe" type="hidden">
  <input name="fb_dtsg" value="_19R5" autocomplete="off" type="hidden">
  <input autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot;514782389&quot;,&quot;target_fbid&quot;:&quot;184361748268334&quot;,&quot;target_profile_id&quot;:&quot;514782389&quot;,&quot;type_id&quot;:&quot;17&quot;,&quot;source&quot;:&quot;1&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot;2309869772&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot;1298066944&quot;,&quot;check_hash&quot;:&quot;e76c88ca6e20b4a0&quot;}" type="hidden">
  <div class="UIImageBlock clearfix"><i class="UIImageBlock_Image UIImageBlock_ICON_Image img sp_4b2fk0 sx_b64365"></i>
    <div class="UIImageBlock_Content UIImageBlock_ICON_Content"><span class="uiStreamSource"><a href="/aleem.sheikh/posts/184361748268334"><abbr title="Saturday, February 19, 2011 at 3:09am" data-date="Fri, 18 Feb 2011 14:09:04 -0800" class="timestamp">4 hours ago</abbr></a></span><span class="UIActionLinks UIActionLinks_bottom" data-ft="{&quot;type&quot;:&quot;action&quot;}"> ·
        <button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button>
        ·
        <label class="uiLinkButton comment_link" onclick="return fc_click(this);" title="Leave a comment">
          <input value="Comment" type="button">
        </label>
        · <a title="Send this to friends or post it on your profile." href="/ajax/share_dialog.php?s=99&amp;appid=2309869772&amp;p%5B0%5D=514782389&amp;p%5B1%5D=184361748268334" rel="dialog">Share</a></span></div>
  </div>
  <ul class="uiList uiUfi focus_target fbUfi" data-ft="{&quot;type&quot;:&quot;ufi&quot;}">
    <li class="ufiNub uiListItem  uiListVerticalItemBorder"><i></i>
      <input autocomplete="off" name="xhp_ufi" value="1" type="hidden">
    </li>
    <li class="ufiItem uiUfiLike">
      <div class="UIImageBlock clearfix"><a class="UIImageBlock_Image UIImageBlock_ICON_Image" tabindex="-1">
          <label onclick="this.form.like.click();"><i class="img sp_8dfqpl sx_4ac53f" title="Like this item"></i></label>
        </a>
        <div class="UIImageBlock_Content UIImageBlock_ICON_Content"><a href="http://www.facebook.com/profile.php?id=100000407120411">Syed Murtaza Zaidi</a> likes this.</div>
      </div>
    </li>
    <li class="uiUfiComments uiListItem  uiListVerticalItemBorder hidden_elem">
      <ul class="commentList">
      </ul>
    </li>
    <li class="uiUfiAddComment clearfix ufiItem ufiItem uiListItem  uiListVerticalItemBorder uiUfiAddCommentCollapsed">
      <div><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41709_1014341698_4889488_q.jpg" alt="">
        <div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content">
          <div class="commentBox">
            <textarea class="DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox textBoxContainer" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) {new TextAreaControl(this).setAutogrow(true);this._has_control = true;}});">Write a comment...</textarea>
          </div>
          <label class="mts mts commentBtn stat_elem optimistic_submit uiButton uiButtonConfirm" for="u127419_35">
            <input value="Comment" name="comment" id="u127419_35" type="submit">
          </label>
        </div>
      </div>
    </li>
  </ul>
  <input value="{&quot;src&quot;:10,&quot;sty&quot;:263,&quot;actrs&quot;:&quot;514782389&quot;,&quot;object_id&quot;:184361748268334,&quot;pub_time&quot;:1298066944,&quot;fbid&quot;:&quot;184361748268334&quot;,&quot;qid&quot;:&quot;5575216616647978849&quot;,&quot;mf_objid&quot;:184361748268334,&quot;s_obj&quot;:5,&quot;s_edge&quot;:1,&quot;s_prnt&quot;:3,&quot;pos&quot;:9,&quot;filter&quot;:&quot;h&quot;}" name="link_data" type="hidden">
</form>

Answer 1

因为

1. BUTTON type="submit" 和 INPUT type="submit" 是提交表单的标准方式，
2. 所以 Like-action 使用 POST 请求，因为应该使用 POST 请求当某些服务器端状态改变时。
3. Like-action 包含多个具有长值的参数。某些浏览器对 URL 长度有限制，如果作为 GET 请求发送，like 操作的参数可能会超出该长度。
4. 使用标准元素允许所有浏览器即使没有 JavaScript 也可以正确提交类似操作作为 POST 请求。使用链接将导致 GET 请求。

Answer 2

我从来没有注意到它是一个按钮而不是一个链接，很好的捕捉。

这可能是因为“赞”操作不是真正的链接。它不会带你去任何地方。因此，虽然他们将其设计为链接，但它实际上并不是链接。当然，他们可以使用链接，但我认为使用按钮更正确。单击按钮会执行操作，而不是通过链接转到新页面。这与你在 Facebook 上“喜欢”某件事时所发生的情况非常吻合。

Answer 3

甚至移动版本似乎也使用链接。该按钮一定是他们认为需要支持更严格的浏览器设置时留下的。 ——阿列克西