使用 Ajax 更改 InputText-Values答案

【问题标题】：Change InputText-Values with Ajax使用 Ajax 更改 InputText-Values
【发布时间】：2013-01-21 14:27:52
【问题描述】：

所以我有一堆 InputText-Boxes，它们表达某种客户数据（客户 ID、名字、姓氏等）

现在我想在输入有效的客户 ID 时自动填充（使用相应的 mysql 数据）所有 InputText-Boxes。

<h:inputText id = "customer_id" value="#{reservationHandler.customer.customer_id}"/>

我想我必须使用 Ajax 将当前的客户 ID 传递给托管 bean，但我该怎么做呢？以及如何填充其他 InputText-Boxes？

提前致谢。

【问题讨论】：

您使用的是 JSF 1.x 还是 JSF 2.x？

标签： ajax jsf

【解决方案1】：

这个任务可以使用 JSF 2 附带的 <f:ajax> 标签来完成，在 this tutorial 中有很好的说明。第一个示例向您展示了如何完成手头的任务。另一个建议是对托管 bean 使用 @ViewScoped 注释，如 BalusC 博客文章所述：Communication in JSF 2.0 - Managed bean scopes。

有了所有这些信息和您正在使用的托管 bean，演示可能是：

客户类别

public class Customer {
    private int customer_id;
    private String name;
    //constructor, getters and setters...
}

ReservationHandler 托管 bean

@ManagedBean
@ViewScoped
public class ReservationHandler {
    private Customer customer;
    //this EJB will retrieve the Customer data
    //if you don't have it like this, then use your own 
    //custom CustomerService class/implementation to retrieve the data from dabatase
    @EJB
    private CustomerService customerService;
    //constructor, getters and setters...
    @PostConstruct
    public void init() {
        customer = new Customer();
    }
    public void showCustomerDataListener(AjaxBehaviorEvent event) {
        Customer customerFromDB =
            customerService.getCustomer(customer.getCustomer_id());
        if (customerFromDB != null) {
            customer = customerFromDB;
        }
    }
}

Customer Facelets 视图（只是相关代码）

<h:form>
    <h:outputText value="Customer ID:" />
    <h:inputText id="customer_id"
        value="#{reservationHandler.customer.customer_id}">
        <f:ajax event="blur"
            listener="#{reservationHandler.showCustomerDataListener}"
            render="customer_name" />
    </h:inputText>
    <h:outputText value="Customer name:" />
    <h:inputText id="customer_name"
        value="#{reservationHandler.customer.name}" />
</h:form>

如果您的 Customer 类拥有超过 1 个属性，您有两种选择：

在<f:ajax>组件的render属性中设置每个输入的ID，但这很幼稚。

使用UIContainer 对所有组件进行分组并呈现此 UIContainer。假设Customer 类有一个额外的private String address 属性给出的示例：

<h:form>
    <h:outputText value="Customer ID:" />
    <h:inputText id="customer_id"
        value="#{reservationHandler.customer.customer_id}">
        <f:ajax event="blur"
            listener="#{reservationHandler.showCustomerDataListener}"
            render="customerData" />
    </h:inputText>
    <h:panelGrid id="customerData" columns="2">
        <h:outputText value="Customer name:" />
        <h:inputText id="customer_name"
            value="#{reservationHandler.customer.name}" />
        <h:outputText value="Address:" />
        <h:inputText id="customer_address"
            value="#{reservationHandler.customer.address}" />
    </h:panelGrid>
</h:form>

要了解<f:ajax event="what_to_write_here">中支持的事件，请参考f:ajax JSF Core Tag Reference，事件标签属性说明：

将调用 Ajax 请求的事件，例如“click”、“change”、“blur”、“keypress”等。该事件必须由启用 Ajax 行为的组件支持。注意：事件名称与没有“on”前缀的 DOM 事件名称相同，因此对于“onclick”事件，正确的事件名称是“click”。 h:commandButton、h:commandLink等命令组件支持“action”事件，h:inputText、h:selectOneMenu等输入组件支持“valueChange”事件。

【讨论】：