Struts2 Ajax

最新推荐文章于 2024-10-06 17:19:15 发布

hcqdfd

最新推荐文章于 2024-10-06 17:19:15 发布

阅读量853

点赞数

文章标签： struts action ajax asynchronous json ajax框架

本文链接：https://blog.csdn.net/huangcanqin/article/details/6481848

版权

基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX框架，而是使用时下Java EE平台中比较流行的AJAX框架——Dojo和DWR。
最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。这些框架都是开发Ajax不错的选择，项目中可选择使用。

一、使用Ajax主题提交表单

1、JSP页面

Xml代码

<s:head theme="ajax"/>
<div id="show">原始内容</div>
<s:form action="deal" method="post" theme="ajax">
<s:datetimepicker name="chooseDate" label="日期选择"/>
<s:submit targets="show" loadingText="请等待，提交中..."/>
</s:form>

<s:head theme="ajax"/> <div id="show">原始内容 <s:form action="deal" method="post" theme="ajax"> <s:datetimepicker name="chooseDate" label="日期选择"/> <s:submit targets="show" loadingText="请等待，提交中..."/> </s:form>

2、Action配置

Xml代码

<action name="deal" class="com.xy.struts2.DealWithParams">
<result name="success">/AjaxResult.jsp</result>
</action>

<action name="deal" class="com.xy.struts2.DealWithParams">  <result name="success">/AjaxResult.jsp</result> </action>

3、AjaxResult

Xml代码

<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
//设置页面不缓存
request.setAttribute("decorator","none");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);
%>
<s:property value="chooseDate"/>
<s:property value="msg"/>

<%@ page language="java" pageEncoding="GBK"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% //设置页面不缓存 request.setAttribute("decorator","none"); response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setDateHeader("Expires",0); %>  <s:property value="chooseDate"/> <s:property value="msg"/>

4、Action

代码略。

5、小结

利用Struts2整合的Ajax主题，可用实现表单异步提交，但是必须使用一个额外的视图来接受数据，有点麻烦。

二、使用JSON插件开发Ajax

JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。　

（1）将json-plugin.jar文件复制到Web应用的WEB-INF路径下，即可完成JSON插件的安装。

（2）把JSON.js、prototype-1.4.0.js复制到js文件夹下

（3）完成JSP页面

Xml代码

<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title><s:text name="user.register" /></title>
<script src="js/prototype-1.4.0.js" type="text/javascript"></script>
<script src="js/json.js" type="text/javascript"></script>
<script language="JavaScript">
function validateName()
{
//请求的地址
var url = 'validateName.action';
var params = Form.Element.serialize('user.uid');
//创建Ajax.Request对象，对应于发送请求
var myAjax = new Ajax.Request(
url,
{
//请求方式：POST
method:'post',
//请求参数
parameters:params,
//指定回调函数
onComplete: processResponse,
//是否异步发送请求
asynchronous:true
});
}
function processResponse(request)
{
var action = request.responseText.parseJSON();
$("tip").innerHTML = action.tip;
$("tip2").innerHTML='欢迎您，'+action.user.uid;
}
</script>
</head>
<body>
<span id="tip" style="color:red;font-weight:bold"></span>
<s:form action="Register" validate="true">
<s:textfield name="user.uid" key="user.uid" onblur="validateName();"/>
<s:password name="user.upwd" key="user.upwd" />
<s:submit key="submit" />
</s:form>
</body>
</html>

<%@ page language="java" pageEncoding="GBK"%> <%@ taglib prefix="s" uri="/struts-tags"%> <html> <head> <title><s:text name="user.register" /></title>  <script src="js/prototype-1.4.0.js" type="text/javascript"></script> <script src="js/json.js" type="text/javascript"></script>  <script language="JavaScript"> function validateName() { //请求的地址 var url = 'validateName.action'; var params = Form.Element.serialize('user.uid'); //创建Ajax.Request对象，对应于发送请求 var myAjax = new Ajax.Request( url, { //请求方式：POST method:'post', //请求参数 parameters:params, //指定回调函数 onComplete: processResponse, //是否异步发送请求 asynchronous:true }); } function processResponse(request) { var action = request.responseText.parseJSON(); $("tip").innerHTML = action.tip; $("tip2").innerHTML='欢迎您，'+action.user.uid; } </script> </head> <body> <span id="tip" style="color:red;font-weight:bold"> <s:form action="Register" validate="true"> <s:textfield name="user.uid" key="user.uid" οnblur="validateName();"/> <s:password name="user.upwd" key="user.upwd" /> <s:submit key="submit" /> </s:form> </body> </html>

（4）完成Action

代码略。

（5）配置Action

Xml代码