JSF中使用f:ajax标签无刷新页面改变数据

时间:2023-07-11 21:31:20

  ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作。异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax。JSF的facelets内置了一个ajax标签,可用于简单的ajax操作。

  f:ajax 有几个常用属性,分别是:event、listener、render。

1、event:event 对应一个js事件名,该事件名省略了开头的”on“字符,例如点击事件是onclick,那么只需要填入click即可。类似事件还有obblur、onkeyup、onmouseover等等。

2、listener:lisetener为指定一个ajax事件,当前事件需要执行bean中的什么方法。实际调用bean中的方法即可。

3、render:render内填入一个需要渲染的组件id。ajax实现异步操作的目的就是无刷新页面显示数据,那么当返回数据时,这些数据需要显示在那个区域,给该区域指定一个  id,和render关联即可,这里可以填入多个id,用空格隔开。

示例性代码如下:

a.xhtml:

 <h:form preparedId="false">
<div id="show">#{bean.var}</div>
<h:commandButton value="点击">
<f:ajax event="click" render="show" listener="#{bean.do}"/>
</h:commandButton>
</h:form>

bean.java:

 private String var;

public void setVar(String var){
this.var = var;
} public String getVar(){
return var;
} public void do(){
var="hello";
}

上面的代码中,当在页面点击按钮时,会触发bean中的do方法,进而改变var的值,通过ajax的render属性指定刷新id为“show”的区域。

jsf ajax还可以与一组组件关联起来,形成ajax组,只需要把一组组件内置于ajax标签内即可,示例性代码如下:

 <f:ajax event="click" listener="#{bean.do}">
<h:form>
<h:commandButton value="click1"/>
<h:commandButton value="click2"/>
<h:commandButton value="click3">
<f:ajax event="blur" lisrener="#{bean.do2}"/>
</h:commandButton>
<h:form>
</f:ajax>

  以上代码在第三个按钮中还用了一个ajax标签。ajax组件可以这样嵌套使用,从最近的地方开始执行。

  jsf的ajax操作广泛用于字段验证方面,通过事件向bean传递数据,一般input类型标签使用validator属性指定验证方法,此验证方法带有3个参数,分别是FacesContext、UIComponent和一个Object类型数据,该object即为输入框内的值。

  ajax还有一个onevent属性,该属性只能填入一个js方法。这个js方法会被调用3次,分别是三个状态:"begin、success、complete",即对于ajax请求的三个状态:请求之前、呈现响应、成功调用。js方法有一个参数,参数的status属性为这几个状态,是示例性代码如下:

  

 function fun(data){
if(data.status == "begin"){ }
if(data.status == "complete"){ }
if(data.status == "success"){ } }

  总结:目前使用到的还不是很多,有些特殊使用方法还没遇到过,比如有引入jsf的js库,可以实现更为复杂的ajax操作,传递ajax参数等等。以后遇到再详细了解。