博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSF 2.0 + Ajax hello world example
阅读量:6777 次
发布时间:2019-06-26

本文共 2353 字,大约阅读时间需要 7 分钟。

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

JSF 2.0 + Ajax Hello World Example

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.

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@SessionScopedpublic 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

270128385784589.png

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“.

270128446723353.png

转载于:https://www.cnblogs.com/ghgyj/p/4762143.html

你可能感兴趣的文章