Struts 2經常使用的Ajax標籤

時間 2019-11-26

標籤 struts 經常使用 ajax 標籤欄目 Struts 简体版

原文原文鏈接

Struts 2對Ajax的支持

•Struts 2對Ajax提供了很好的支持

–Struts 2.1提供了基於Dojo的Ajax標籤，對Ajax操做進行了進步封裝，能夠更快捷容易的使用Ajax

•使用Struts 2.1的Ajax標籤前必須進行以下操做

1）將struts2-dojo-plugin-2.1.x.x.jar複製到WEB-INF\lib目錄

2）在JSP頁面中導入Ajax標籤

<!-- 引入Ajax標籤 -->
<%@ taglib uri="/struts-dojo-tags" prefix="sx"%>

3）在JSP頁面中加入head標籤，負責在頁面上導入Dojo所須要的CSS庫和JavaScript庫

    <head>
        <!-- 在JSP頁面中加入head標籤
            負責在頁面上導入Dojo所須要的CSS庫和JavaScript庫 -->
        <sx:head />
    </head>

Struts 2.1的Ajax標籤

方法名	說明
<sx:div>	建立一個div區域，能夠經過Ajax向其中加載內容，以實現局部刷新 
<sx:submit>	經過Ajax來更新某個元素的內容或提交表單
<sx:a>	經過Ajax來更新某個元素的內容或提交表單
<sx:tabbedPanel>	建立一個標籤面板，由<s:div>來提供內容。
<sx:autocompleter>	根據用戶輸入提供輸入建議，或者幫助用戶自動完成輸入
<sx:tree>	建立一個支持Ajax的樹形組件（Widget）

div標籤例子

•使用Ajax技術實現以下需求：

　　–頁面有三個div：div一、div二、div3

　　–div1的內容每隔5秒時間自動更新一次，每隔30分鐘提示用戶休息一下（刷新屢次）

　　–開始訪問時，在div2中顯示歡迎信息（刷新一次）

　　–整個訪問過程當中div3中內容保持不變（無刷新）

使用<sx:div>標籤來實現

實現代碼：css

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 引入struts2的標籤庫 -->
<%@ taglib uri="/struts-tags" prefix="s"%>
<!-- 引入Ajax標籤 -->
<%@ taglib uri="/struts-dojo-tags" prefix="sx"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>My JSP 'ajaxTime.jsp' starting page</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
        <!-- 在JSP頁面中加入head標籤
            負責在頁面上導入Dojo所須要的CSS庫和JavaScript庫 -->
        <sx:head />
    </head>

    <body>
        <s:url id="time" value="time.action" />
        <s:url id="welcome" value="welcome.action" />

        <!-- 每隔1秒異步訪問一次 -->
        <sx:div href="%{time}" updateFreq="1000" />
        <!-- 只異步訪問一次 -->
        <sx:div href="%{welcome}" />
        <!-- 無異步訪問-->
        <sx:div>
            初始化的內容！
        </sx:div>
    </body>
</html>

ajaxTime.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>My JSP 'time.jsp' starting page</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    </head>

    <body>
        <%
            //得到當前時間
            long currentTime = System.currentTimeMillis();
            
            //取出session中存入的如今時間
            Long stratTime = (Long) session.getAttribute("currentTime");
            if (stratTime == null) {
                //第一次訪問
                session.setAttribute("currentTime", currentTime);
            } else {
                //以秒計算計算已用時間
                long used = (currentTime - stratTime) / 1000;
                session.setAttribute("used", used);
                //當用戶瀏覽網頁時間超過60秒則提示用戶休息一下。
                boolean flag = false;
                if (used > 60) {
                    flag = true;
                }
                session.setAttribute("flag", flag);
            }
        %>
        <s:if test="#session.flag==true">
         你該稍微休息一下了。
         </s:if>
        <s:else>
         你已經訪問的時間：<s:property value="#session.used" default="0" />秒
         </s:else>
    </body>
</html>

time.jsp

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "struts-2.1.dtd" >
<struts>
    <package name="struts2" extends="struts-default" namespace="/" >
        <action name="time">
            <!-- name屬性不寫默認success -->
            <result>/time.jsp</result>            
        </action>
        <action name="welcome">
            <result>/welcome.jsp</result>            
        </action>
    </package>
</struts>

struts.xml

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'welcome.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
  
  <body>
        歡迎你登陸本系統！
  </body>
</html>

welcome.jsp

submit和a標籤例子

•使用Ajax技術實現以下需求：

　　–頁面有兩個div，還有一個超連接

　　–單擊超連接後在div1中出現登陸表單

　　–若是登陸成功，在div2中顯示登陸成功；登陸失敗在div2中顯示登陸失敗

使用<sx:div>標籤來定義div，使用<sx:a>和<sx:submit>定義超連接和提交按鈕實現

實現代碼：html

package com.entity;
/**
 * 用戶類
 * @author asus
 *
 */
public class Users {

    /** 屬性 */
    private String name;
    private String password;
    
    /** 構造方法 */
    public Users() {
        super();
    }
    public Users(String name, String password) {
        super();
        this.name = name;
        this.password = password;
    }
    
    /** javaBean */
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    
}

Users實體類

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 引入Struts2標籤庫 -->
<%@ taglib uri="/struts-tags" prefix="s" %>
<!-- 引入Ajax標籤庫 -->
<%@ taglib uri="/struts-dojo-tags" prefix="sx" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'home.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<!-- 在JSP頁面中加入head標籤
            負責在頁面上導入Dojo所須要的CSS庫和JavaScript庫 -->
        <sx:head/>
  </head>
  
  <body>
          <!-- url標籤 用於生成一個URL地址 -->
          <s:url id="login" value="tologin.action" />
          <!-- 單擊超連接異步訪問指定Action -->
        <sx:a href="%{login}" targets="div1" >登陸</sx:a>
        
        
        <sx:div id="div1" cssStyle="border:1px solid red;" >
            第一個sx:div顯示登陸
        </sx:div><br>
        <sx:div id="div2" cssStyle="border:1px solid green" >
            第二個DIV，顯示登陸結果。
        </sx:div>
  </body>
</html>

home.jsp 主頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 引入struts2的標籤庫 -->
<%@ taglib uri="/struts-tags" prefix="s"%>
<!-- 引入Ajax標籤 -->
<%@ taglib uri="/struts-dojo-tags" prefix="sx"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>My JSP 'ajaxTime.jsp' starting page</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
        <!-- 在JSP頁面中加入head標籤
            負責在頁面上導入Dojo所須要的CSS庫和JavaScript庫 -->
        <sx:head />
    </head>
    <body>
        <h2>用戶登陸</h2>
        <!-- Struts2 表單標籤 -->
        <s:form id="s_form" action="login.action" method="post" theme="simple">
            <br>
                   用戶名： <s:textfield label="用戶名" name="user.name" />
            <br>
                   密碼：     <s:textfield label="密碼" name="user.password" />
            <br>
                <!-- 表單內異步提交表單  -->
                <sx:submit type="button" value="表單內異步提交按鈕" targets="div2" />
        </s:form>
            <!-- 表單外異步提交 -->
            <sx:submit type="button" value="表單外異步提交按鈕" formId="s_form" targets="div2"/>
            <sx:a formId="s_form" targets="div2" >我也能夠提交表單</sx:a>
    </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "struts-2.1.dtd" >
<struts>
    <package name="struts2" extends="struts-default" namespace="/" >
        
        <!-- 單擊「用戶登陸」超連接顯示登陸菜單 -->
        <action name="tologin" >
            <result >/login.jsp</result>
        </action>
        
        <!-- 單擊表單提交按鈕顯示登陸結果 -->
        <action name="login" class="com.struts.LoginAction" method="login" >
            <result>/success.jsp</result>    
            <result name="error">/error.jsp</result>
        </action>
    </package>
</struts>

struts.xml 配置

package com.struts;

import com.entity.Users;
import com.opensymphony.xwork2.ActionSupport;
/**
 * 控制器類
 * 做用：處理登陸的請求
 * @author asus
 *
 */
public class LoginAction extends ActionSupport {

    /** 屬性 */
    private Users user;
    
    /** 重寫execute方法 ：此方法做用，爲指定處理請求的方法時，默認走此方法*/
    public String execute(){
        
        return "";
    }
    
    /** 登陸驗證的方法 */
    public String login(){
        
        if(user!=null){
            if(user.getName().equals("admin") && user.getPassword().equals("admin")){
                return SUCCESS;
            }
        }
        
        return ERROR;
    }

    /** JavaBean */
    public Users getUser() {
        return user;
    }

    public void setUser(Users user) {
        this.user = user;
    }
    
}

LoginAction 控制器

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'success.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
  
  <body>
        登陸成功！
  </body>
</html>

success.jsp 登陸成功頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'file.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
  
  <body>
        登錄失敗！
  </body>
</html>