我们从Web 2.0的随波逐流,Ajax的大放异彩说起,Struts2框架自己整合了对Ajax的原生支持(struts 2.1.7+,之前的版本可以通过插件实现),框架的整合只是使得JSON的创建变得异常简单,并且可以简单的融入到Struts2框架中,当然这只是在我们需要JSON的时候才会显得流光溢彩。

ajax请求在项目中常常使用,今天就平时掌握的总结一下,关于使用ajax请求到Struts2中的action时,前台页面与后台action之间的数据传递交互问题。

这里我主要记录下自己所掌握的几种方式。可以根据自己平时项目的需求来进行选择。

1.使用stream类型的result

此种类型可以直接让Struts2中的action向客户端浏览器生成文本响应。

示例:

jsp页面:

<%@ taglib prefix="s" uri="/struts-tags" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax提交登录信息</title> <%--导入js插件--%> <script src="${PageContext.request.contextPath}/demo/js/jquery-1.4.4.min.js" type="text/javascript"></script> </head> <body> <h3>异步登录</h3> <s:form id="loginForm" method="POST"> <s:textfield name="username"/> <s:textfield name="psw"/> <input id="loginBtn" type="button" value="提交"> </s:form> <p id="show" style="display:none;"></p> </body> <script type="text/javascript"> $("#loginBtn").click(function(){ $("#show").hide(); //发送请求login 以各表单里歌空间作为请求参数 $.get("login",$("#loginForm").serializeArray(), function(data,statusText){ $("#show").height(80) .width(240) .css("border","1px solid black") .css("border-radius","15px") .css("backgroud-color","#efef99") .css("color","#ff0000") .css("padding","20px") .empty(); $("#show").append("登录结果:"+data+"<br/>"); $("#show").show(600); },"html");//指定服务器响应为html }); </script> </html>

处理逻辑的action:

/** * Description:eleven.action * Author: Eleven * Date: 2018/1/26 18:09 */ public class LoginAction extends ActionSupport{ private String username; private String psw; //输出结果的二进制流 private InputStream inputStream; public String login() throws Exception{ if(username.equals("tom")&& psw.equals("123")){ inputStream = new ByteArrayInputStream("恭喜您,登录成功".getBytes("UTF-8")); }else{ inputStream = new ByteArrayInputStream("对不起,登录失败".getBytes("UTF-8")); } return SUCCESS; } //提供get方法 public InputStream getInputStream() { return inputStream; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPsw() { return psw; } public void setPsw(String psw) { this.psw = psw; } }

action中除了接收页面传递的用户名、密码外,还有一个InputStream类型的成员变量,并为它提供了对应的get方法。get方法中返回的二进制流将会直接输出给客户端浏览器。

struts.xml配置:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" ""> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" /> <package name="default" namespace="/" extends="struts-default"> <action name="login" class="eleven.action.LoginAction" method="login"> <result type="stream"> <!--指定stream流生成响应的数据类型--> <param name="contentType">text/html</param> <!--指定action中由哪个方法去输出InputStream类型的变量--> <param name="inputName">inputStream</param> </result> </action> </package> </struts>

在浏览器中浏览该页面,并输入相关信息,然后提交,可以看到后台action直接将消息数据返回给页面,而同时页面也不需要进行刷新,而是直接在局部进行显示,这是利用了ajax的异步发送请求。注意,此种方式需要在struts.xml文件中要配置类型为stream的流,并设置inputName属性,并在action中提供InputStream对应的get方法。

运行截图:

Struts2和Ajax数据交互(图文教程)

2.使用json类型的result

有个jar包struts2-json-plugin-2.3.16.3.jar,可以为Struts2增加JSON插件,即当action中的result的类型设为json时,也可以在客户端js中异步调用action,并且action中返回的数据,可以直接被JSON插件序列化成json格式的字符串,并将该字符串返回给客户端浏览器。

示例:

jsp页面:

<%@ taglib prefix="s" uri="/struts-tags" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax提交登录信息</title> <%--导入js插件--%> <script src="${PageContext.request.contextPath}/demo/js/jquery-1.4.4.min.js" type="text/javascript"></script> </head> <body> <h3>异步登录</h3> <s:form id="loginForm" method="POST"> <s:textfield name="username"/> <s:textfield name="psw"/> <input id="loginBtn" type="button" value="提交"> </s:form> <p id="show" style="display:none;"></p> </body> <script type="text/javascript"> $("#loginBtn").click(function(){ $("#show").hide(); //发送请求login 以各表单里歌空间作为请求参数 $.get("login",$("#loginForm").serializeArray(), function(data,statusText){ //此时的data中包含username,psw,age $("#show").height(80) .width(300) .css("border","1px solid black") .css("border-radius","15px") .css("backgroud-color","#efef99") .css("color","#ff0000") .css("padding","20px") .empty(); alert(data); $("#show").append(data+"<br/>"); $("#show").show(600); },"html"); }); </script> </html>