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

【问题标题】：How to update a value displayed in the page without refreshing如何在不刷新的情况下更新页面中显示的值
【发布时间】：2011-05-02 02:03:24
【问题描述】：

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

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

而且我还有一个具有此属性的支持 bean：

@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 来实现，您能给我一些建议吗？

由于我需要字符串类型的字段，我的验证应该如何实现？

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

【问题讨论】：

我对网络应用不太熟悉，但是你有没有看过Property Change Listeners？

标签： java javascript ajax jsf jsf-2

【解决方案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: Ajax in JSF – using f:ajax tag

【讨论】：

【解决方案2】：

如果您使用的是 java，请获取 JQuery。一旦你用你的代码处理并获得了想要的结果，你就可以抓住你想要放置它的 dom 元素并执行以下操作：

$("#result").html(newData);

【讨论】：