zoukankan      html  css  js  c++  java
  • JSF 2.0 + Ajax hello world example

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

  • 相关阅读:
    C#的System.Diagnostics.Trace.WriteLine 写入到文件中案例
    ubuntu开放指定端口
    mysql 启报错报 The server quit without updating PID file
    【WebMisCentral WMC】基于Extjs 4.2x的企业级用户授权认证中心系统(SSO+AM+SM),多租户SAAS应用
    Ajaxupload.js在最新版chrome 83版浏览器oncomplete失效问题解决方法
    SQLServer 父子结构group汇总显示
    jqweui 关于$(document.body).infinite的bug
    EntityFramework 动态构造排序 Func<IQueryable<T>, IOrderedQueryable<T>> Dynamic
    Safari 3D transform变换z-index层级渲染异常的研究
    Asp.net Core中使用NLog,并封装成公共的日志方法
  • 原文地址:https://www.cnblogs.com/ghgyj/p/4762143.html
Copyright © 2011-2022 走看看