我个人认为Structs的标签确实有点丑,而且与jsp结合比较紧密,在html页面中是不能使用的,但是有些人偏爱html,我就是其中的一个,所以这个时候就用到了ajax。其实你在form中的action中配置请求路径也可以。但是没有ajax灵活好用。
上一篇已经讲过基本配置了,这里直接配置好ajax的url就好了,其实struct.xml也发生些许变化,将会变得更清晰明了。这里以一个平时的例子简单叙述一遍,首先你把struct2的配置写好,然后大家先看一个网页Struct2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Struct2数据交换</title>
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>
<body>
<div align="center">
<input type="button" value="struct2发送数据测试" onclick="Login()">
<img id="imgCode" src="toCode" onclick="ChangeCode()" style="padding-top:8px"/>
</div>
<script type="text/javascript">
//动态加载验证码
function ChangeCode()
{
var img = document.getElementById("imgCode");
img.src = "Test!getCode.action?time="+new Date().getTime();
}
function Login(){
$.ajax({
async : false,
cache : false,
timeout: 1000,
url: "Test!sendDate.action?time="+new Date().getTime(),
type: "post",
data:{"username":"德玛西亚","userpass":2,"validate":3},
success: function(data){
alert("ok");
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
</script>
</body>
</html>
上面的例子中有两个请求,一个是ajax请求,一个是通过修改图片的src向后台发送一个请求,就是验证码。需要注意的是ajax的url,下面对路径详细说明一下。
Test!sendDate.action?time="+new Date().getTime()
Test是请求的名称
sendDate是你调用他对应类的方法
?time="+new Date().getTime()是为了去缓存,一些页面缓存很可怕的。与这个地方机密关联的是struct.xml文件看一下今天的struct.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="struts2" extends="struts-default">
<action name="Test" class="action.TestAction"></action>
</package>
</struts>
name就是对应的名称,然后class是路径action是包名,TestAction是类名,与上一篇路径有些不同,需要重新新建包建类,至于对应的result就不用理会了,剩下的就交给ajax。且看对应的TestAction.java
package action;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
public class TestAction {
private HttpServletResponse response = ServletActionContext.getResponse();
//生成验证码
private static Font VALIDATECODE_FONT = new Font("Times New Roman ",Font.PLAIN, 21);
public void getCode() {
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
// 在内存中创建图象
BufferedImage image = new BufferedImage(80, 30,BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
Graphics g = image.getGraphics();
// 设定背景色
g.setColor(Color.white);
g.fillRect(0, 0, 80, 30);
// 画边框
g.setColor(Color.blue);
g.drawRect(0, 0, 80 - 1, 30 - 1);
Long validate = new Long(10000 + Math.round((Math.random() * 90000)));
String validateCode = validate.toString();
// 将认证码显示到图象中
g.setColor(Color.black);
g.setFont(VALIDATECODE_FONT);
g.drawString(validateCode.toString(), 10, 22);
// 随机产生88个干扰点,使图象中的认证码不易被其它程序探测到
Random random = new Random();
for (int iIndex = 0; iIndex < 100; iIndex++) {
int x = random.nextInt(80);
int y = random.nextInt(30);
g.drawLine(x, y, x, y);
}
// 图象生效
g.dispose();
try {
// 输出图象到页面
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(image, "jpeg", sos);
sos.close();
} catch (Exception e) {
}
}
//简单数据接收测试
public String username;
public void sendDate(){
System.out.println("接受页面发送数据成功///"+username);
}
}
这样两个请求对应两个方法,将能很随意的在html页面中实现和后台的交互了。如果说后台获取数据了如何返回给前台呢,可以看一下ajax返回数据的方法,这里我简单的封装了一个方法
//向ui层返回数据
public static void UIReturn(Object ob){
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
response.getWriter().write(ob.toString());
} catch (IOException e) {
e.printStackTrace();
}
}
每次返回数据调用它就行了,然后你在html的js中获取ajax的data就行了,这样一个完整的交互就完成了。