用过Struct2的人都知道,界面不是太美,就算用css美化过以后,仍然有瑕疵,但是他的数据交互能力是非常强的,用着也挺方便的,所以把他和jquery+ajax相结合就很好了,前台你用工具随便做,做完后用js调用action就行了。废话不多说,开始记录步骤:
先上个整体布局的图,这样看着有整体感
1.配置struct环境,先去网上下载个Struc的包,然后解压把apps中的struts2-blank解压,把里面所有的jar包复制粘贴到你的web项目下的WEB-INF/lib中去,在然后配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>YZLTest</display-name>
<welcome-file-list>
<welcome-file>page/login.jsp</welcome-file>
</welcome-file-list>
<!-- Struts2配置 -->
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
这样这个Struct的环境就好了,可以开工了。
2.在src下配置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>
<constant name="struts.enable.DynamicMethodInvocation" value="true" />
<package name="struts2" extends="struts-default">
<action name="Login" class="myAjax.AjaxAction" method="proit">
</action>
<action name="Login" class="myAjax.AjaxAction" method="login">
</action>
</package>
</struts>
3.jsp或html页面制作,还有js代码的书写
这个jsp页面制作时,要往后台传数据的name必须有,这样用get和set方法就能获取到前台的数据了,然后是辅助js的下载和导入。
<form action="Login">
<div class="row-fluid login-wrapper">
<img class="logo" src="img/login/logo-white.png" />
<div class="span4 box">
<div class="content-wrap">
<h6>登 录</h6>
<input id="usernum" class="span12" type="text" placeholder="请输入您的账号" />
<input id="password" class="span12" type="password"
placeholder="请输入您的密码" />
<table>
<tr>
<td style="width: 80px;"><input id="proving"
style="width: 80px; height: 30px;" type="text" placeholder="验证信息" /></td>
<td style="width: 80px;"><input id="provimg" name="proit"
style="height: 40px;" type="image" align="middle" src="10010.jpg"></td>
</tr>
</table>
<div class="remember">
<input id="remember-me" type="checkbox" />
<label for="remember-me">记住我</label>
</div>
<input id="loginer" type="button" name="init" class="btn-glow primary login"value="登录">
<input id="clearit" type="button" class="btn-glow primary login" value="重置">
</div>
</div>
</div>
</form>
这是我的一个form,然后对登陆和验证码写了两个action,本片用验证input传Json数据。然后对应如下js
//actionName!methodName.action;action的动态请求methodName表示你要请求的action的方法
$("#loginer").click(function(event){
var num = document.getElementById("usernum").value;
var password = document.getElementById("password").value;
if(num!=""&&password!=""){
$.ajax({
async : false,
cache : false,
timeout: 1000,
url: "Login!login.action",
type: "post",
success: function(data){
if(data.toString()=="ok"){
//ui.success(num+"登陆成功",1000);
alert("登陆成功");
}},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
$("#provimg").click(function(event){
$.ajax({
async : false,
cache : false,
timeout: 1000,
url: "Login!proit.action",
type: "post",
success: function(data){
alert(eval(data).length);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
});
Login对应action的name class是包名.类名,method对应的是方法名,当然记得定义一个person类,传数据时,单个的话直接传过去就好了,当时Json时就有麻烦了,首先要集齐七个jar包,要不JSONObject Json = JSONObject.fromObject(map);这一句过不去,然后如果你是list出来的数据是var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
alert(eval(data).length);
这个在前台可以直接解析但是如果你是对象放在list里面,list又放在map里面就惨了,愣是解析不错来,于是被逼无奈只得在在数据两边加了个[],然后才得以解析成功。这样向前台传数据的话就不用再配置了。
4.mappackage myAjax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import beant.Person;
public class AjaxAction {
public void login() {
HttpServletResponse response = null;
String result = "";
try {
response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
// 这里处理你登录操作
if("3".equals("3"))
{result = "ok";
}
response.getWriter().print(result); // 将结果传到页面中
// 这里你可以组织你想要的数据格式来进行传递到页面
} catch (Exception e) {
result = "登录失败!";
try {
response.getWriter().print(result);
} catch (IOException e1) {
}
}
}
public void proit()
{
HttpServletResponse response = null;
String result = "";
try {
//var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
Person ps = new Person();
ps.setAge("18");
ps.setName("赵子龙");
//Map<String,Object> map = new HashMap<String,Object>();
//map.put("yun", ps);
//JSONObject Json = JSONObject.fromObject(map);//将map对象转换成json类型数据
List list = new ArrayList();
list.add(ps);
list.add(ps);
Map<String,Object> map = new HashMap<String,Object>();
map.put("yun", list);
map.put("zhang", list);
JSONObject Json = JSONObject.fromObject(map);//将map对象转换成json类型数据
response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/json");
response.getWriter().write("["+Json.toString()+"]");
System.out.println(Json.toString());
} catch (Exception e) {
result = "失败!";
try {
response.getWriter().print(result);
} catch (IOException e1) {
}
}
}
}