如何在不刷新的情况下更新页面中显示的值

Question

我在JSF页面中有这3个字段

<h:inputText id="val1" value="#{managedBean.val1}"/> 
<h:inputText id="val2" value="#{managedBean.val2}"/> 
<h:outputText value="#{managedBean.result}"/>

我也有一个具有以下属性的后备豆：

@ManagedBean
@RequestScoped
public class NewOfferSupportController {

   private String val1;
   private String val2;
   private String result;

//Get set methods...
}

我希望在将某些值插入字段val1和val2中而不刷新页面时，outputText元素自动更改其值。结果变量应以这种方式计算（它正在计算百分比）：（val1 * val2）/ 100

您能帮我解决我的一些疑问吗？：

我知道为此，我需要javascript或AJAX之类的东西。您认为最好的方法是什么？

我很想知道我如何使用AJAX进行操作，您能给我一些提示吗？

由于我需要这些字段的类型为String，应如何实现我的验证？

我能避免在字段中键入不是数字的字符吗（如果所按下的键不是数字，则根本不会出现在输入字段中）？

Answer 1

如果这是简单的计算，不需要服务器调用，则应使用客户端javascript解决方案

但是，当您喜欢使用Ajax进行操作时，就可以开始使用..

您可以使用<f:ajax>和render属性使用AJAX使事情发生。

<h:form> 
      <h:inputText value="#{managedBean.val1}" > 
         <f:ajax event="keyup" render="result" listener="#{managedBean.someThingToDoListener}"/> 
      </h:inputText> 
      <h:inputText value="#{managedBean.val2}" > 
        <f:ajax event="keyup" render="result" listener="#{managedBean.someThingToDoListener}"/> 
      </h:inputText>

      <h:outputText id="result" value="#{managedBean.result}"/>
</h:form>

@ManagedBean(name = "managedBean") 
public class Bean { 
   private String val1; // getter and setter 
   private String val2; // getter and setter 
   private String res; // getter and setter 
   ...

   public void someThingToDoListener(AjaxBehaviorEvent event) { 
       //res = some processing
    }

}

也可以看看

• JSF2：JSF中的Ajax –使用f：ajax标记