首页 > 代码库 > Struts 2常用的Ajax标签

Struts 2常用的Ajax标签


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.1Ajax标签
方法名
说    明
<sx:div>
创建一个div区域,可以通过Ajax向其中加载内容,以实现局部刷新 ?
<sx:submit>
通过Ajax来更新某个元素的内容或提交表单
<sx:a>
通过Ajax来更新某个元素的内容或提交表单
<sx:tabbedPanel>
创建一个标签面板,由<s:div>来提供内容。
<sx:autocompleter>
根据用户输入提供输入建议,或者帮助用户自动完成输入
<sx:tree>
创建一个支持Ajax的树形组件(Widget)
 

div标签例子
•使用Ajax技术实现如下需求:
 
  –页面有三个div:div1、div2、div3
  –div1的内容每隔5秒时间自动更新一次,每隔30分钟提示用户休息一下(刷新多次)
  –开始访问时,在div2中显示欢迎信息(刷新一次)
  –整个访问过程中div3中内容保持不变(无刷新)
 
使用<sx:div>标签来实现

技术分享技术分享

实现代码:

技术分享
<%@ 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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/styles.css">    -->  </head>    <body>        欢迎你登录本系统!  </body></html>
welcome.jsp
 
submit和a标签例子
•使用Ajax技术实现如下需求:
 
  –页面有两个div,还有一个超链接
  –单击超链接后在div1中出现登录表单
  –如果登录成功,在div2中显示登录成功;登录失败在div2中显示登录失败
 
使用<sx:div>标签来定义div,使用<sx:a>和<sx:submit>定义超链接和提交按钮实现

 技术分享技术分享

实现代码:

技术分享
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="http://www.mamicode.com/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="http://www.mamicode.com/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>
login.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="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="http://www.mamicode.com/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="http://www.mamicode.com/styles.css">    -->  </head>    <body>        登陆失败!  </body></html>
error.jsp 登录失败页面

Struts 2常用的Ajax标签