In JSF 2.0, coding Ajax is just like coding a normal HTML tag, it’s extremely easy. In this tutorial, you will restructure the last JSF 2.0 hello world example, so that, when the button is clicked, it will make an Ajax request instead of submitting the whole form.

1. JSF 2.0 Page

A JSF 2.0 xhtml page with Ajax support.

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>
<div><div class="ads-in-post hide_if_width_less_800">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90 - After1stH4 -->
<ins class="adsbygoogle hide_if_width_less_800"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-2836379775501347"
data-ad-slot="7391621200"
data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div><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> <div><div class="ads-in-post hide_if_width_less_800">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90 - After2ndH4 -->
<ins class="adsbygoogle hide_if_width_less_800"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-2836379775501347"
data-ad-slot="3642936086"
data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div><h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2>
</h:form> </h:body>
</html>

In this example, it make the button Ajaxable. When the button is clicked, it will make an Ajax request to the server instead of submitting the whole form.

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

In the <f:ajax> tag :

  • execute=”name” – Indicate the form component with an Id of “name” will be sent to the server for processing. For multiple components, just split it with a space in between, e.g execute=”name anotherId anotherxxId”. In this case, it will submit the text box value.
  • render=”output” – After the Ajax request, it will refresh the component with an id of “output“. In this case, after the Ajax request is finished, it will refresh the <h:outputText> component.

2. ManagedBean

See the full #{helloBean} example.

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. How it work?

Access the URL : http://localhost:8080/JavaServerFaces/helloAjax.jsf

When the button is clicked, it makes an Ajax request and pass the text box value to the server for processing. After that, it refresh the outputText component and display the value via getSayWelcome() method, without any “page flipping effect“.

JSF 2.0 + Ajax hello world example的更多相关文章

  1. Parameter Passing / Request Parameters in JSF 2.0 (转)

    This Blog is a compilation of various methods of passing Request Parameters in JSF (2.0 +) (1)  f:vi ...

  2. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的!

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  3. JSF 2.0 hello world example

    In this tutorial, we will show you how to develop a JavaServer Faces (JSF) 2.0 hello world example, ...

  4. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  5. JSF学习五Ajax

    验证username(不能有下划线)和password(不能小于六位) 1.UserBean.java package ajax; import java.io.Serializable; impor ...

  6. Spring security 3.1 +JSF 2.0 . problem with annotating methods in ManagedBeans?

    Hy .What i am trying to do is to integrate Spring security with a Jsf+spring IOC +hibernate applicat ...

  7. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  8. yii2.0 ajax

    2.0用的参数是_csrf token = "<?php echo \Yii::$app->request->getCsrfToken()?>", $.aj ...

  9. web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

随机推荐

  1. [HIHO1318]非法二进制(动态规划)

    题目链接:http://hihocoder.com/problemset/problem/1318 题意:是个dp题.考虑二进制数为i位的时候,无非有两种情况:新添加的一位为0或者1. 为0的时候,那 ...

  2. C++ STL之排序算法

    排序算法和查找算法差不多,也涉及到迭代器区间问题,关于该问题的注意事项就不在啰嗦了 一.全部排序sort.stable_sort sort是一种不稳定排序,使用时需要包含头文件algorithm 默认 ...

  3. 异常:java.lang.UnsupportedOperationException: Manual close is not allowed over a Spring managed SqlSession

    使用mybatis-3.2.2.jar + mybatis-spring-1.2.0.jar集成时,报以下异常: 15:42:48.538 [Thread-1] DEBUG o.s.b.f.s.Dis ...

  4. timus1004 最小环()Floyd 算法

    通过别人的数据搞了好久才成功,果然还是不够成熟 做题目还是算法不能融会贯通 大意即找出图中至少3个顶点的环,且将环中点按顺序输出 用floyd算法求最小环 因为floyd算法求最短路径是通过中间量k的 ...

  5. bzoj2584

    这是bzoj上AC的第700题,一定要是一道神题!!! 当初分组赛的时候讲过拖到现在才写…… 我们考虑把垂直方向移动和水平方向移动分开来考虑,不合法的轮数取二者最小 假设考虑的是垂直方向移动,障碍其实 ...

  6. asp.net实现文件解压和压缩

    C#解压RAR压缩文件(--转载--测试通过) using System; using System.Collections.Generic; using System.Text; using Sys ...

  7. 用Java Servlets代替CGI

    从网络的早期阶段开始,人们就希望他们的网络服务器不仅能够显示静态文档,通用网关接口(CGI) 扩展了服务器的能力,但其代价是增加了额外的处理进程.FastCGI则把外部CGI 处理进程同网络服务器更紧 ...

  8. UVALive 4128 Steam Roller(最短路(拆点,多状态))

    题意:模拟了汽车的行驶过程,边上的权值为全速通过所消耗的时间,而起步(从起点出发的边).刹车(到终点结束的边).减速(即将拐弯的边).加速(刚完成拐弯的边)这四种不能达到全速的情况,消耗的时间为权值* ...

  9. angular js 实例参数学习

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  10. 开源的rtsp实现

    开源的rtsp实现                            ============== -- by BeagleTam                                  ...