h:button 和 h:commandButton 的区别 [英] Difference between h:button and h:commandButton

问题描述

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

In JSF 2, what is the difference between h:button and h:commandButton ?

推荐答案

<h:button> 生成 HTML .生成的元素使用 JavaScript 导航到属性 outcome 指定的页面，使用 HTTP GET 请求.

<h:button>

The <h:button> generates a HTML <input type="button">. The generated element uses JavaScript to navigate to the page given by the attribute outcome, using a HTTP GET request.

例如

<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 中的 URL.如果 SEO 对给定 URL 很重要，您最好使用 或 .如有必要，您可以在生成的 HTML <a> 元素上添加一些 CSS，使其看起来像一个按钮.

Even though this ends up in a (bookmarkable) URL change in the browser address bar, this is not SEO-friendly. Searchbots won't follow the URL in the onclick. You'd better use a <h:outputLink> or <h:link> if SEO is important on the given URL. You could if necessary throw in some CSS on the generated HTML <a> element to make it to look like a button.

请注意，虽然您可以在 outcome 属性中放置一个引用方法的 EL 表达式，如下所示，

Do note that while you can put an EL expression referring a method in outcome attribute as below,

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

当您单击按钮时，它不会被调用.相反，当包含按钮的页面被渲染时，它已经被调用，以获得要嵌入到生成的 onclick 代码中的导航结果.如果您曾尝试使用 outcome="#{bean.action}" 中的 action 方法语法，那么面对 javax.el.E​​LException: 找不到类中的属性 actionMethodcom.example.Bean.

it will not be invoked when you click the button. Instead, it is already invoked when the page containing the button is rendered for the sole purpose to obtain the navigation outcome to be embedded in the generated onclick code. If you ever attempted to use the action method syntax as in outcome="#{bean.action}", you would already be hinted by this mistake/misconception by facing a javax.el.ELException: Could not find property actionMethod in class com.example.Bean.

如果您打算作为 POST 请求的结果调用方法，请改用 ，请参见下文.或者，如果您打算根据 GET 请求调用方法，请前往 在页面加载时调用 JSF 托管 bean 操作，或者如果您还通过 <f:param> 获得请求参数，如何在页面加载时处理后台 bean 中的 GET 查询字符串 URL 参数?

If you intend to invoke a method as result of a POST request, use <h:commandButton> instead, see below. Or if you intend to invoke a method as result of a GET request, head to Invoke JSF managed bean action on page load or if you also have GET request parameters via <f:param>, How do I process GET query string URL parameters in backing bean on page load?

生成一个 HTML 按钮，默认情况下提交父 使用 HTTP POST 方法并调用附加到 action、actionListener 和/或 (如果有)的操作. 是必需的.

The <h:commandButton> generates a HTML <input type="submit"> button which submits by default the parent <h:form> using HTTP POST method and invokes the actions attached to action, actionListener and/or <f:ajax listener>, if any. The <h:form> is required.

例如

<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 模式)，以便目标 URL 可添加书签.

Note that it thus submits to the current page (the form action URL will show up in the browser address bar). It will afterwards forward to the target page, without any change in the URL in the browser address bar. You could add ?faces-redirect=true parameter to the outcome value to trigger a redirect after POST (as per the Post-Redirect-Get pattern) so that the target URL becomes bookmarkable.

通常专门用于提交 POST 表单，而不是执行页面到页面的导航.通常，action 指向一些业务操作，例如将表单数据保存在 DB 中，它返回一个 String 结果.

The <h:commandButton> is usually exclusively used to submit a POST form, not to perform page-to-page navigation. Normally, the action points to some business action, such as saving the form data in DB, which returns a String outcome.

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

与

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

返回 null 或 void 会让你回到同一个视图.也返回一个空字符串，但它会重新创建任何视图范围的 bean.如今，使用现代 JSF2 和 <f:ajax>，动作往往只是返回到相同的视图(因此，null 或 void>) 其中结果由 ajax 有条件地呈现.

Returning null or void will bring you back to the same view. Returning an empty string also, but it would recreate any view scoped bean. These days, with modern JSF2 and <f:ajax>, more than often actions just return to the same view (thus, null or void) wherein the results are conditionally rendered by ajax.

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

---

另见:

• 如何在 JSF 中导航?如何使 URL 反映当前页面(而不是前一个页面)
• 我什么时候应该使用 h:outputLink 而不是 h:commandLink?
• action 和 actionListener 的区别

这篇关于h:button 和 h:commandButton 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！