h:commandButton与h:commandLink的区别

Question

我们正在使用JSF-2.1.7，并在所有表单提交请求中。我正在尝试确定是使用<h:commandButton>还是<h:commandLink>。 <h:commandLink>（href <a/>）的外观可以使用样式和jQuery进行控制。

推荐使用哪个，<h:commandButton> 还是 <h:commandLink>？有什么真正的优势吗？

- user684434

---

阅读此链接（http://www.skill-guru.com/blog/2009/09/07/difference-between-hcommandbutton-hcommandlink-and-houtputlink-in-jsf/），它可能会对你有所帮助... - Fahim Parkar

Answer 1

除了生成的标记和外观之外，<h:commandButton> 和 <h:commandLink> 之间没有功能上的区别。 <h:commandButton> 生成一个 HTML <input type="submit">元素，而<h:commandLink> 生成一个使用JavaScript提交表单的HTML <a> 元素。两者都用于提交表单。附加样式对功能无关紧要。

如果你需要一个提交按钮，请使用<h:commandButton>，如果你需要一个提交链接，请使用<h:commandLink>。如果这对你来说不太合理，那我也不知道该怎么说了。如果你不能决定使用哪个，请选择在UI方面最合理的一个。如果不确定，可以向网页设计师询问。

<h:commandLink> 和 <h:outputLink> 之间的区别更有趣。详细信息可以在此处找到：When should I use h:outputLink instead of h:commandLink?

- BalusC

Answer 2

简而言之，我的建议是在主要（默认）提交按钮上使用<h:commandButton type="submit">，并在任何其他按钮上使用<h:commandLink>（例如：过滤、排序、查找、预览、生成密码等）。

下面是详细说明：

首先，一些背景知识：您应该了解不同的<h:commandButton> type属性。（type属性直接转换为生成的<input type="">属性。）虽然我没有在任何地方明确说明这一点，但一些测试表明：

- type="submit"（如果省略，则默认为此）执行表单的正常“提交”行为（即将表单POST），以及action和/或actionListener。 - type="reset"执行正常的“重置”行为（即清除/重置表单字段），不会调用任何action和/或actionListener。 - type="button"生成一个按钮（显然<input type="button">比<button>标记受限制），不会调用任何action和/或actionListener。

除了重置字段之外，后两个似乎只有激活JavaScript时才有用。它们不会将表单POST。

所以回答这个问题：在表单上下文中： - <h:commandButton>（等同于<h:commandButton type="submit">）通常是最有用的，特别是因为大多数浏览器现在实现了在表单的DOM树中找到的第一个提交按钮的激活，当按下Enter键时。这可能会改善您的表单用户体验。

例如，使用以下方式登录速度较快：

1. 用户名 Tab 密码 Enter 而不是

2. 用户名 Tab 密码 ... 将手从键盘移开，寻找指针并将其定位在按钮上，然后单击。

还要记住，任何<input>按钮（可选CSS样式）仍然可以通过Tab键到达，直到<a>（作为按钮的CSS样式）获得焦点，然后按Spacebar键。

然而，对于表单上的其他按钮，如果它们应该执行一些其他操作而不是提交(或“仅”清除字段)，则使用<h:commandLink>更为恰当。这仍然可以通过键盘到达，直到<a> (CSS样式化为按钮)获得焦点，然后按Enter。请注意，这与使用<h:commandButton>生成的按钮不一致，虽然它们可以被CSS样式化为相同，但在浏览器中处理方式不同(Tab...Spacebar)。

这是一般的解释，但你可能需要注意一些问题...

当表单上没有<h:commandButton type="submit">按钮时，只有一个<h:commandLink>按钮(甚至根本没有按钮)，当用户按下Enter时，表单仍然会被提交，但没有action{Listener}运行的好处。这可能不是太大的问题，因为表单值被存储在后端bean中，在页面加载时再次显示，所以除了服务器往返之外，用户通常不会注意到任何问题。但这可能不是您想要处理Enter的方式....我现在能想到的唯一方法是在表单上放置一个onSubmit事件，通过Javascript激活您的默认<h:commandLink>按钮.... 哎呀！

你还需要确保CSS样式选择器正确。

• A.mystyle 应用于 <h:commandLink>；
• INPUT[type=submit].mystyle 应用于 <h:commandButton type="submit">；
• INPUT[type=reset].mystyle 应用于 <h:commandButton type="reset">；
• INPUT[type=button].mystyle 应用于 <h:commandButton type="button">；

当然，这些可以通过逗号连接为单个样式定义的选择器。或者，如果你想冒险将其他内容样式化为mystyle按钮，则可以省略A/INPUT说明符。但是，我已经将我的按钮设置为上述样式，因此我也可以使用以下内容：

• SPAN.mystyle 定义链接或按钮被禁用时（例如通过disabled属性），这允许您为禁用的按钮提供一个淡化的（灰色）外观。

我还遇到了一些高度差异（按钮上的行高与链接上的内容高度不同-如果您的按钮包含背景图像作为图标而不是文本，则可能会出现问题），以及:before/:after伪类的一些轻微差异。我想说的是：在<h:commandButton>和<h:commandLink>上测试和反复测试你的CSS，以确保它们（基本上）看起来相同！

这是我的摘要备忘单：

JSF                  <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
                      type="submit">   type="reset">    type="button">
转换为                <input           <input           <input           <a>
                      type="submit">   type="reset">    type="button">
提交表单                 POST             no,清除字段      no              POST
Javascript事件           YES              YES              YES             YES
action{Listener}          YES              no               no              YES
输入表单激活Enter         YES              no               no              no
Tab...+Enter 激活        YES(*)           YES              YES             YES
Tab...+Space 激活        YES(*)           YES              YES             no
Tab焦点高亮：
- Firefox 32            YES              no               no              no
- Chrome 41             YES              YES              YES             YES
- Internet Explorer 11  YES              YES              YES             YES
- Opera 28              YES              YES              YES             no(*)
(*=Opera 28似乎不允许使用Tab（或Alt+Arrow）激活超链接。)

- frIT

---

你基本上在回答<input type="submit">与<a href="#" onclick="form.submit()">的区别，而不是<h:commandButton>与<h:commandLink>的区别。 - BalusC

我承认有罪，Bauke。我试图摆脱以前那种严格按照别人的话字面意思的教条主义方式 - 在我看来，问题更多地涉及使用其中一个与另一个的实际性，并且JSF给一个没有经验的用户留下了抽象HTML的印象，这不一定是情况，幸运和/或不幸的是。就一个三年前的问题而言......专注于HTML功能方面可能会或可能不会达到问题的目标，但我认为你的回答很好地涵盖了JSF功能方面，不需要重复。 - frIT

尽管如此，还是要为你的努力点赞。 - BalusC

Answer 3

对于表单，我更喜欢使用h:commandbutton。

h:commandbutton就像HTML中的按钮，您可以设置后端bean的操作。h:commandlink就像HTML中的链接（标签a），您也可以设置后端bean的操作。

要在JSF中使用CSS样式，您可以使用属性“styleClass”。

- Felipe Queiroz

Answer 4

如果我错了，请纠正我，但这两者之间的第一个区别是，<h:commandButton>不需要在浏览器中启用JavaScript。如果您的网页使用JS较多，则可以使用<h:commandLink>，否则，如果您的用户想要使用Tor浏览器并且您同意，则最好保持JS免费。

第二个区别是这两者在网页中的行为方式。 <h:commandLink>将执行其应该执行的操作，有时还会从具有@PostConstruct注释的后备bean中触发方法。 而<h:commandButton>也可能触发内联JavaScript，这可能会导致从后备bean触发其他方法。但它也会自动刷新视图。

- Apollo