h：button和h：commandButton之间的区别

Posted 2021-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h：button和h：commandButton之间的区别相关的知识，希望对你有一定的参考价值。

在JSF 2中，h:button和h:commandButton有什么区别？

答案

`<h:button>`

<h:button>生成html <input type="button">。生成的元素使用javascript导航到属性outcome使用HTTP GET请求给出的页面。

<h:button value="GET button" outcome="otherpage" />

会产生

<input type="button" onclick="window.location.href='/contextpath/otherpage.xhtml'; return false;" value="GET button" />

即使这最终导致浏览器地址栏中的（可收藏的）URL更改，这也不是SEO友好的。 Searchbots不会关注onclick中的网址。如果SEO对给定的URL很重要，你最好使用<h:outputLink>或<h:link>。如果需要，您可以在生成的HTML <a>元素上放入一些CSS，使其看起来像一个按钮。

请注意，虽然您可以在outcome属性中引用EL表达式，如下所示，

<h:button value="GET button" outcome="#{bean.getOutcome()}" />

单击按钮时不会调用它。相反，当包含按钮的页面的呈现仅用于获取嵌入生成的onclick代码中的导航结果时，它已被调用。如果您曾尝试使用outcome="#{bean.action}"中的动作方法语法，那么您可能会因为面对javax.el.ELException: Could not find property actionMethod in class com.example.Bean而误解/误解。

如果您打算根据POST请求调用方法，请改用<h:commandButton>，见下文。或者，如果您打算作为GET请求的结果调用方法，请前往Invoke JSF managed bean action on page load或者如果您还通过<f:param>获得GET请求参数，How do I process GET query string URL parameters in backing bean on page load?

`<h:commandButton>`

<h:commandButton>生成一个HTML <input type="submit">按钮，默认情况下使用HTTP POST方法提交父<h:form>，并调用附加到action，actionListener和/或<f:ajax listener>的操作（如果有的话）。 <h:form>是必需的。

<h:form id="form">
    <h:commandButton id="button" value="POST button" action="otherpage" />
</h:form>

会产生

<form id="form" name="form" method="post" action="/contextpath/currentpage.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form" />
    <input type="submit" name="form:button" value="POST button" />
    <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="...." autocomplete="off" />
</form>

请注意，它因此提交到当前页面（表单操作URL将显示在浏览器地址栏中）。之后它将转发到目标页面，而不会对浏览器地址栏中的URL进行任何更改。您可以将?faces-redirect=true参数添加到结果值以在POST后触发重定向（根据Post-Redirect-Get pattern），以便目标URL变为可收藏。

<h:commandButton>通常专门用于提交POST表单，而不是执行页面到页面的导航。通常，action指向某些业务操作，例如将表单数据保存在DB中，这会返回String结果。

<h:commandButton ... action="#{bean.save}" />

同

public String save() {
    // ...
    return "otherpage";
}

返回null或void将带您回到相同的视图。还返回一个空字符串，但它会重新创建任何视图范围的bean。现在，使用现代JSF2和<f:ajax>，更多的操作通常会返回到相同的视图（因此，null或void），其中结果由ajax有条件地呈现。

public void save() {
    // ...
}

首先，<h:button outcome="page.xhtml" value="button"/>导致浏览器发出HTTP GET请求，而<title>Facelet Title</title></head><body><input type="button" onclick="window.location.href='/jsf/faces/page.xhtml'; return false;" value="button" />执行表单POST。这意味着在使用2.0时，页面中具有用户输入值的任何组件（如文本字段，复选框等）都不会自动提交给服务器。要使用h:button|h:link提交值，必须使用“查看参数”功能执行额外操作。

这两种组件之间的第二个主要区别是，h:commandButton|h:commandLink有一个结果属性来描述下一步，而h:button|h:link为此目的使用了一个动作属性。这是因为前者不会在事件系统中产生ActionEvent，而后者会产生。

最后，对于完全理解这个特征最重要的是，h:button|h:link组件导致导航系统被要求在页面呈现期间导出结果，并且该问题的答案在页面的标记中编码。相反，h:button|h:link组件导致导航系统被要求从页面上的POSTBACK导出结果。这是时间上的差异。渲染总是在POSTBACK之前发生。