Struct2前台后台数据交互jquery+ajax

用过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) {

}

}

}

}