JSF 2.0 + Ajax Hello World示例

最新推荐文章于 2024-07-09 14:39:36 发布

cyan20115

最新推荐文章于 2024-07-09 14:39:36 发布

阅读量152

点赞数

文章标签： ui xhtml java

在JSF 2.0中，对Ajax进行编码就像对普通的HTML标签进行编码一样，这非常容易。在本教程中，您将重组最后一个JSF 2.0 hello world示例，以便在单击按钮时将发出Ajax请求，而不是提交整个表单。

1. JSF 2.0页面

具有Ajax支持的JSF 2.0 xhtml页面。

helloAjax.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html">
	
    <h:body>
    	<h2>JSF 2.0 + Ajax Hello World Example</h2>
    	
    	<h:form>
    	   <h:inputText id="name" value="#{helloBean.name}"></h:inputText>
    	   <h:commandButton value="Welcome Me">
    		 <f:ajax execute="name" render="output" />
    	   </h:commandButton>
    		
    	   <h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2>	
    	</h:form>

    </h:body>
</html>

在此示例中，它使按钮可Ajaxable。单击该按钮时，它将向服务器发出Ajax请求，而不是提交整个表单。

<h:commandButton value="Welcome Me">
    <f:ajax execute="name" render="output" />
</h:commandButton>
<h:outputText id="output" value="#{helloBean.sayWelcome}" />

在<f：ajax>标记中：

execute =“ name” –表示ID为“ name ”的表单组件将被发送到服务器进行处理。对于多个组件，只需在它们之间用空格分隔即可，例如execute =” name anotherId anotherxxId” 。在这种情况下，它将提交文本框值。
render =“ output” –在Ajax请求之后，它将刷新ID为“ output ”的组件。在这种情况下，Ajax请求完成后，它将刷新<h：outputText>组件。

2. ManagedBean

请参阅完整的＃{helloBean}示例。

HelloBean.java

package com.mkyong.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String name;

	public String getName() {
	   return name;
	}
	public void setName(String name) {
	   this.name = name;
	}
	public String getSayWelcome(){
	   //check if null?
	   if("".equals(name) || name ==null){
		return "";
	   }else{
		return "Ajax message : Welcome " + name;
	   }
	}
}

3.如何运作？

访问URL： http：// localhost：8080 / JavaServerFaces / helloAjax.jsf

单击该按钮时，它将发出Ajax请求，并将文本框值传递给服务器进行处理。之后，它将刷新outputText组件并通过getSayWelcome（）方法显示该值，而没有任何“ 页面翻转效果 ”。

下载源代码

下载它– JSF-2-Ajax-Hello-World-Example.zip （8KB）

翻译自: https://mkyong.com/jsf2/jsf-2-0-ajax-hello-world-example/

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSF 2.0 + Ajax Hello World示例

在JSF 2.0中，对Ajax进行编码就像对普通的HTML标签进行编码一样，这非常容易。在本教程中，您将重组最后一个JSF 2.0 hello world示例，以便在单击按钮时将发出Ajax请求，而不是提交整个表单。 1. JSF 2.0页面具有Ajax支持的JSF 2.0 xhtml页面。 helloAjax.xhtml <?xml version="1.0" en...
复制链接

扫一扫