使用JSF 2.3 commandScript调用CDI Bean后无法更新视图求助

看起来你的核心问题是AJAX请求触发了Bean的方法，但页面上的输出组件没更新。我帮你梳理几个关键的修复点和排查步骤：

1. 先修复<h:button>的问题 #

你现在用的<h:button>会生成一个GET请求的链接，点击时虽然调用了submitForm()，但同时会触发页面跳转，直接打断了AJAX请求的执行。把它换成带type="button"的<h:commandButton>，这样它只是个普通按钮，不会触发表单提交：

<h:commandButton value="submit" type="button" onclick="submitForm(); return false;" />

加个return false;是为了彻底阻止任何默认的表单提交行为，确保只有AJAX请求被触发。

2. 检查CDI Bean的配置 #

确保你的translatorBean满足以下要求：

• 作用域正确：如果希望在同一个视图中保留状态（比如多次提交翻译），用@ViewScoped（JSF 2.3支持CDI的javax.faces.view.ViewScoped）；如果只是单次请求，@RequestScoped也可以，但刷新页面后状态会丢失。
• 方法返回值正确：translate()方法必须返回void或者null，如果返回字符串，JSF会认为是导航规则，导致AJAX请求被重定向，自然无法渲染组件。
• Getter/Setter齐全：input和output字段必须有对应的getter和setter，否则JSF无法完成值绑定。

示例Bean代码：

import javax.inject.Named;
import javax.faces.view.ViewScoped;
import java.io.Serializable;

@Named
@ViewScoped
public class TranslatorBean implements Serializable {
    private String input;
    private String output;

    public void translate() {
        // 这里写你的翻译逻辑，比如调用翻译API或者模拟处理
        this.output = "翻译结果：" + input;
    }

    // Getter和Setter
    public String getInput() { return input; }
    public void setInput(String input) { this.input = input; }
    public String getOutput() { return output; }
    public void setOutput(String output) { this.output = output; }
}

3. 确认render目标的客户端ID正确 #

你的commandScript里render=":output"是对的（因为output组件在form外面，用绝对定位），但要确保：

• 页面上确实存在ID为output的<h:outputText>组件，没有拼写错误；
• 组件没有被其他容器（比如<h:panelGroup>）包裹导致客户端ID变化（可以用浏览器开发者工具查看组件的实际ID，比如是否变成了j_idt12:output之类的）。

4. 排查AJAX请求的执行情况 #

打开浏览器的开发者工具（F12），做以下检查：

• Console标签：看看有没有JS错误，比如submitForm函数未定义（如果commandScript没正确渲染会出现这个问题）；
• Network标签：过滤XHR请求，点击按钮后看看有没有AJAX请求发送，响应里是否包含更新后的output组件内容。如果请求成功但响应里没有输出，那可能是Bean的方法没正确执行或者值没设置。

修复后的完整页面代码 #

<body>
  <h:form id="formpanel">
    <h:commandScript 
      name="submitForm" 
      execute="@form" 
      action="#{translatorBean.translate()}" 
      render=":output" 
      ajax="true" />
    <h:inputText value="#{translatorBean.input}" placeholder="输入要翻译的内容" />
    <h:commandButton value="提交翻译" type="button" onclick="submitForm(); return false;" />
  </h:form>
  <br/>
  翻译结果：<h:outputText id="output" value="#{translatorBean.output}" />
</body>

按照这些步骤调整后，应该就能正常触发Bean方法并更新页面上的输出字段了。

内容的提问来源于stack exchange，提问作者Carla