Struts2.2.3.1+Jquery1.8.2+AJAX

来源：互联网发布：vba实时抓取网页数据编辑：程序博客网时间：2024/04/30 14:48

struts-2.2.3.1\lib下引入Json所需要的包：

json-lib-2.1-jdk15.jar

struts2-json-plugin-2.2.3.1.jar

commons-collections-3.1.jar

commons-beanutils-1.8.0.jar

commons-lang-2.5.jar

commons-logging-1.1.1.jar

ezmorph-1.0.6.jar

导入struts-2.2.3.1所需要的包

struts2-core-2.2.3.1.jar

xwork-core-2.2.3.1.jar

ognl-3.0.1.jar

freemarker-2.3.16.jar

WebRoot下建立js文件夹，存放jquery-1.8.2.js，Json2.js。

接下来就做三件事：

一、准备一个JSP页面用于提交ajax请求，这里使用JQuery的$.getJSON(url,params,function callback(data))函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data；

二、一个处理请求的Action类，并在struts.xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面。同时在struts.xml中配置对应action，指明其返回类型为json并使其package的extends为json-default，并将要返回请求页面的数据放在名为root的param中，如<param name="root">result</param>。

三、接受请求返回结果：使用JS的eval方法将返回结果data转换成JSON对象，并处理返回结果。

先处理后台Java代码：

User类

public class User {private int id;private String name;public int getId() {return id;}public String getName() {return name;}public void setId(int id) {this.id = id;}public void setName(String name) {this.name = name;}

Action类：

public class UserAction extends ActionSupport {private List<User> list;private Map<Integer, User> map;private String message;private User user;public List<User> getList() {return list;}public Map<Integer, User> getMap() {return map;}public String getMessage() {return message;}public User getUser() {return user;}public String returnList() {list = new ArrayList<User>();for (int i = 1; i <= 3; i++) {User u = new User();u.setId(i);u.setName("user" + i);list.add(u);}System.out.println(list.size());return "list";}public String returnMap() {map = new HashMap<Integer, User>();for (int i = 1; i <= 5; i++) {User u = new User();u.setId(i);u.setName("user" + i);map.put(i, u);}System.out.println(map.size());return "map";}public String returnMsg() {this.message = "message";return "msg";}public String returnUser() {user = new User();user.setId(1);user.setName("user");return "user";}public String register(){  return "register"; }public void setList(List<User> list) {this.list = list;}public void setMap(Map<Integer, User> map) {this.map = map;}public void setMessage(String message) {this.message = message;}public void setUser(User user) {this.user = user;}}

struts.XML

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"><struts><constant name="struts.devMode" value="true" /><package name="user" namespace="/user" extends="json-default"><action name="user" class="com.chq.action.UserAction"><result  name="msg" type="json"></result><result name="user" type="json"></result><result name="list" type="json"></result><result name="map" type="json"></result><result name="register" type="json"></result></action></package></struts>

前台JSP页面

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><script type="text/javascript" src="js/jquery-1.8.2.js"></script><script type="text/javascript" src="js/json2.js"></script><script type="text/javascript">function test(){alert("OK");}function getMsg(){$.getJSON("user/user!returnMsg",function(data){$("#result").html("<font color='red'>"+data.message+"</font>");       });    }    function getUser(){       $("#result").html("");       $.getJSON("user/user!returnUser",function(data){         $("#result").append("id:"+data.user.id+" ")                        .append("name:"+data.user.name);      });   }       function getList(){$("#result").html("");     $.getJSON("user/user!returnList",function(data){ //使用jQuery中的each(data,function(){});函数//从data.userInfosList获取UserInfo对象放入value之中$.each(data.list,function(i,value){ $("#result").append("<div><font color='red'>id："+value.id+"</font></div>")  .append("<div><font color='red'>name："+value.name+"</font></div>"); }); });       }            function getMap(){$("#result").html(""); $.getJSON("user/user!returnMap",function(data){ //key值为Map的键值$.each(data.map,function(key,value){ $("#result").append("<div><font color='red'>id："+value.id+"</font></div>") .append("<div><font color='red'>name："+value.name+"</font></div>");}); }); }function  reg(){var params = $("form").serialize(); $.ajax({ url:"user/user!register",type:"POST",data:params,dataType:"json", success:function(data){ $("#result").html(""); $("#result").append("<div><font color='red'>id："+data.user.id+"</font></div>") .append("<div><font color='red'>name："+data.user.name+"</font></div>"); }});}</script></head><body><input id="getMessage" type="button" value="获取单个值" onclick="getMsg()" />  <input id="getUser" type="button" value="获取User对象" onclick="getUser()" />  <input id="getList" type="button" value="获取List对象" onclick="getList()" />  <input id="getMap" type="button" value="获取Map对象" onclick="getMap()" />  <form >用户ID：<input name="user.id" type="text" /><br />用户名：<input name="user.name" type="text" /><br /><input id="regRe" type="button" value="注册"  onclick="reg()"/></form><!-- 显示结果 --><div id="result"></div></body></html>