<think>我们正在讨论
JSF中的两个按钮组件：<p
:commandButton>和<h
:commandButton>。
根据用户的问题，我们需要区分两者的区别。注意，用户提供了两个引用，但引用内容主要是关于<p
:commandButton>的oncomplete属性的使用，以及一个修改建议（将oncomplete="adds.show()"改为oncomplete="PF('adds').show()"）。但用户的问题核心是两者的区别。
首先，<h
:commandButton>是标准的
JSF（JavaServer Faces）提供的按钮组件，而<p
:commandButton>是PrimeFaces组件库提供的增强版按钮组件。
主要区别：
1. 来源：<h
:commandButton>属于
JSF标准标签库（核心库），而<p
:commandButton>属于PrimeFaces组件库（第三方扩展）。
2. 功能：PrimeFaces的按钮提供了更多丰富的功能和样式，例如内置的图标、Ajax支持（默认就是Ajax）、更丰富的事件（如onstart, oncomplete, onsuccess, onerror等）以及更好的主题支持。
3. Ajax：<p
:commandButton>默认使用Ajax请求，除非设置ajax="false"；而<h
:commandButton>默认是同步请求（整页刷新），如果要使用Ajax，需要嵌套<f
:ajax>标签。
4. 外观：<p
:commandButton>有更多的样式选项和内置的图标，可以轻松创建漂亮的按钮。
5. 事件处理：<p
:commandButton>提供了更多客户端回调事件，如oncomplete（在Ajax请求完成后执行）等，而<h
:commandButton>需要配合<f
:ajax>的事件属性（如onevent）来实现类似功能，但不如PrimeFaces提供的丰富和直观。
下面我们具体说明：
对于<h
:commandButton>，通常这样使用：
<h
:commandButton value="提交" action="#{bean.submit}">
<f
:ajax execute="@form" render="
:messages" />
</h
:commandButton>
这里，我们使用了<f
:ajax>来实现Ajax请求，并指定了执行（execute）和渲染（render）的区域。
而对于<p
:commandButton>，我们可以这样：
<p
:commandButton value="提交" action="#{bean.submit}" update="
:messages" />
这里，update属性相当于<f
:ajax>的render属性，而且默认就是Ajax请求。
此外，<p
:commandButton>还提供了很多其他属性，比如icon（图标）、onclick（点击时执行的JavaScript）、oncomplete（Ajax请求成功完成后执行的JavaScript）等。
引用中提到了oncomplete的使用，例如：
oncomplete="PF('adds').show();"
这里，PF('adds')是PrimeFaces的JavaScript API，用于获取名为'adds'的组件（通常是一个对话框）并调用show()方法显示。
而引用[2]也解释了oncomplete属性是在Ajax请求完成后回调的。
因此，总结区别如下：
1. <p
:commandButton>是PrimeFaces组件，提供更丰富的特性和样式，而<h
:commandButton>是标准
JSF组件。
2. <p
:commandButton>默认使用Ajax，而<h
:commandButton>默认是同步请求。
3. <p
:commandButton>有更便捷的事件属性（如oncomplete）用于处理Ajax请求的各个阶段，而<h
:commandButton>需要配合<f
:ajax>标签来实现类似功能。
在项目中，如果使用了PrimeFaces，推荐使用<p
:commandButton>以获得更好的用户体验和开发效率。
注意：用户提供的引用内容主要是关于<p
:commandButton>的oncomplete属性的使用，这也可以作为区别的一个例证（因为<h
:commandButton>需要通过<f
:ajax>的onevent属性来实现类似功能，且使用方式不同）。
我们可以给出示例代码对比：
标准
JSF的Ajax按钮（<h
:commandButton>）：
<h
:commandButton value="保存" action="#{bean.save}">
<f
:ajax execute="@form" render="
:messages" onevent="handleEvent" />
</h
:commandButton>
然后需要在JavaScript中定义handleEvent函数，根据事件状态（begin, complete, success等）来执行不同的操作。
PrimeFaces的按钮（<p
:commandButton>）：
<p
:commandButton value="保存" action="#{bean.save}" update="
:messages"
onstart="console.log('开始请求')"
oncomplete="console.log('请求完成'); PF('adds').show();"
onsuccess="console.log('请求成功')"
onerror="console.log('请求出错')" />
显然，PrimeFaces的方式更加直观和便捷。
因此，两者的主要区别在于所属库、默认行为、功能丰富性和易用性上。
</think>###
JSF中`<p
:commandButton>`和`<h
:commandButton>`的区别
#### 1. **组件来源**
- **`<h
:commandButton>`**：
属于
JSF标准核心标签库（`h
:`前缀），是所有
JSF实现（如Mojarra）的基础组件，提供基本表单提交功能。
```xhtml
<h
:commandButton value="提交" action="#{bean.submit}" />
```
- **`<p
:commandButton>`**：
属于PrimeFaces组件库（`p
:`前缀），是第三方增强组件，需额外引入PrimeFaces依赖[^2]。
#### 2. **默认行为**
- **`<h
:commandButton>`**：
默认同步提交（整页刷新）。需显式添加`<f
:ajax>`才能启用异步请求：
```xhtml
<h
:commandButton value="提交">
<f
:ajax execute="@form" render="
:messages" />
</h
:commandButton>
```
- **`<p
:commandButton>`**：
默认异步提交（Ajax），无需额外配置。例如：
```xhtml
<p
:commandButton value="保存"
action="#{bean.save}"
update="
:messages" />
```
#### 3. **Ajax事件支持**
- **`<h
:commandButton>`**：
依赖`<f
:ajax>`的事件属性（如`onevent`），需手动处理请求状态：
```javascript
<f
:ajax onevent="handleAjaxEvent" />
```
- **`<p
:commandButton>`**：
内置丰富的Ajax回调事件（如`oncomplete`, `onstart`, `onsuccess`）[^2]：
```xhtml
<p
:commandButton
oncomplete="PF('dialog').show()" // Ajax完成后显示对话框
onerror="alert('错误')" />
```
#### 4. **功能扩展**
- **`<h
:commandButton>`**：
基础功能有限，仅支持标准属性（如`action`, `value`）。
- **`<p
:commandButton>`**：
提供高级特性：
- **图标集成**：`icon="ui-icon-check"`
- **动态禁用**：`disabled="#{bean.isDisabled}"`
- **进度指示**：`ajax="@(true)"` + `process`属性
- **客户端API调用**（如`PF('widgetVar').disable()`）
#### 5. **样式与主题**
- **`<h
:commandButton>`**：
依赖手动CSS样式。
- **`<p
:commandButton>`**：
预置主题（如`bootstrap`），支持`styleClass`和皮肤优化。
#### 总结对比表
| 特性 | `<h
:commandButton>` | `<p
:commandButton>` |
|---------------------|---------------------------|------------------------------|
| **来源** |
JSF标准库 | PrimeFaces组件库 |
| **默认提交方式** | 同步（整页刷新） | 异步（Ajax） |
| **Ajax支持** | 需手动添加`<f
:ajax>` | 原生支持，内置事件回调 |
| **高级功能** | 基础功能 | 图标、进度条、客户端API等 |
| **主题/样式** | 需自定义 | 预置主题，开箱即用 |
> **选择建议**：
> - 基础场景（无复杂交互）使用`<h
:commandButton>`。
> - 需Ajax、丰富UI或异步回调时，优先用`<p
:commandButton>`[^1][^2]。
---
### 相关问题
1. 如何在PrimeFaces中通过JavaScript控制`<p
:commandButton>`的禁用状态？
2. 使用`<h
:commandButton>`时如何捕获Ajax请求的错误事件？
3. PrimeFaces的`<p
:commandButton>`支持哪些内置图标库？
4. 如何优化`<p
:commandButton>`在大数据量提交时的性能？
[^1]
: 引用示例：修改`oncomplete`属性以调用PrimeFaces组件API。
[^2]
: 引用说明：PrimeFaces的`<p
:commandButton>`提供丰富的事件属性（如`oncomplete`）简化Ajax交互。
扫一扫
3534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
