《struts2权威指南》学习笔记之struts2 ajax标签s和submit

本文链接：https://blog.csdn.net/daryl715/article/details/2173375

本文介绍了一个基于Struts2框架实现AJAX功能的实战案例，详细展示了如何配置web.xml和struts.xml文件，实现远程调用服务器端方法并更新指定HTML元素的内容。通过具体的代码示例，包括Action类、JSP页面及标签使用等，帮助读者理解AJAX在Struts2中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<s:a>这个标签生成一个超级链接，用于像服务器发送异步请求，并将服务器响应加载在指定HTML元素中

web.xml

<?xml version="1.0" encoding="GBK"?>

<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet-name>dwr</servlet-name>

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

<filter-name>struts2</filter-name>

<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>

</filter>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

</web-app>

struts.xml

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<result>/AjaxResult.jsp</result>

</action>

<result>/testjs.jsp</result>

</action>

</package>

</struts>

RandomAction

package lee;

import com.opensymphony.xwork2.Action;

import java.io.Serializable;

public class AjaxTestAction implements Action, Serializable

{

private static int counter = 0;

private String data;

public long getServerTime()

{

return System.currentTimeMillis();

}

public int getCount()

{

return ++counter;

}

public String getData()

{

return "服务器提示：" + data;

}

public void setData(String data)

{

this.data = data;

}

public String execute() throws Exception

{

return SUCCESS;

}

AjaxResult.jsp

<%@ page contentType="text/html;charset=GBK" language="java" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

request.setAttribute("decorator", "none");

response.setHeader("Cache-Control","no-cache"); //HTTP 1.1

response.setHeader("Pragma","no-cache"); //HTTP 1.0

response.setDateHeader ("Expires", 0); //prevents caching at the proxy server

服务器计数器: <s:property value="count"/><br>

当前时间是：<s:property value="serverTime"/><br>

服务器返回的提示是：<s:property value="data"/>

testjs.jsp

<%@ page contentType="text/html;charset=GBK" language="java" %>

request.setAttribute("decorator", "none");

response.setHeader("Cache-Control","no-cache"); //HTTP 1.1

response.setHeader("Pragma","no-cache"); //HTTP 1.0

response.setDateHeader ("Expires", 0); //prevents caching at the proxy server

alert('Spring2.0宝典');

</script>

轻量级J2EE企业应用实战

alert('基于J2EE的Ajax宝典!');

</script>

remotelink.jsp

<%@ page contentType="text/html;charset=GBK" language="java" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<s:head theme="ajax"/>

</head>

function before(){alert("before request");}

function after(){alert("after request");}

function handler(widget,node){

alert("本地函数");

dojo.byId(widget.targetsArray[0]).innerHTML="spring2.0宝典";

}

dojo.event.topic.subscribe("/after",function(data,type,e){

alert("正处于dojo的异步交互过程中，类型是:"+type);

})

</script>

<body>

<s:url id="ajaxTest" value="/AjaxTest.action" />

<s:url id="test3" value="/Test3.action" />

<br/>

<br/>

同时修改Div1和Div2的内容<br/>

且将事件发布到/after主题(指定notifyTopics属性)<br/>

<s:a id="link1"

theme="ajax"

href="%{ajaxTest}"

indicator="indicator"

targets="t1,t2" notifyTopics="/after" >修改Div1和Div2内容</s:a>

<br/>

指定服务期返回失败时的错误提示(指定errorText属性)<br/>

因为系统中AjaxNoUrl.jsp页面不存在，肯定出错！<br/>

<s:a id="link2"

theme="ajax"

href="/AjaxNoUrl.jsp"

errorText="系统服务器返回信息出错"

targets="t1">修改'Div 1'内容，使用自定义出错提示</s:a>

<br/>

指定系统加载中的提示信息(指定loadingText属性)<br/>

<s:a id="link3"

theme="ajax"

href="%{ajaxTest}"

loadingText="系统正在加载中..."

targets="t1">修改'Div 1'内容，使用自定义加载信息</s:a>

<br/>

执行远程JavaScript代码(指定executeScripts＝true属性)<br/>

<s:a id="link4"

theme="ajax"

href="%{test3}"

executeScripts="true"

targets="t2">接执行远程JavaScript</s:a>

<br/>

通过使用自定义JavaScript函数来实现Ajax交互(指定handle属性)<br/>

<s:a id="link5"

theme="ajax"

href="%{ajaxTest}"

handler="handler"

targets="t2">使用自定义的处理函数</s:a>

</form>

提交表单请求(通过指定formId属性)

<s:a id="link6"

theme="ajax"

href="%{ajaxTest}"

targets="t2"

formId="form">Div 2 会显示在上面文本框中输入的内容</s:a>

</body>

</html>

remotebutton.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ page pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<s:head theme="ajax" debug="true"/>

</head>

dojo.event.topic.subscribe("/after", function(data, type, e){

alert('正处于Dojo的异步交互过程中，类型是：'+type);

//data : text returned

//type : "before", "load" or "error"

//e : request object

});

</script>

<body>

<div id="t1" style="background-color:#bbbbbb;width:360px;height:80px">将被改变的结果</div>

<s:url id="ajaxTest" value="/AjaxTest.action" />

简单的提交按钮，使用indicator<br>

<s:submit type="submit" theme="ajax" value="提交" targets="t1" href="%{ajaxTest}" align="left" indicator="indicator"/>

<br/>

简单的提交按钮，使用pub-sub事件模型(设置notifyTopics=/after属性)<br>

<s:submit type="submit" theme="ajax" value="提交" targets="t1" href="%{ajaxTest}" align="left" notifyTopics="/after"/>

<br/>

图片按钮（通过指定type="image"）<br>

<s:submit type="image" theme="ajax" label="Alt Text" targets="t1"

src="${pageContext.request.contextPath}/images/struts-power.gif" href="%{ajaxTest}" align="left" />

<br/>

异步方式提交表单：(在下面输入的文本将在上面显示)

<s:form id="form" action="AjaxTest">

<s:submit type="button" theme="ajax" label="发送" targets="t1" id="ajaxbtn"/>

</s:form>

</body>

</html>

struts.properties

struts.custom.i18n.resources=messageResource
struts.i18n.encoding=utf-8
struts.locale = UTF-8