Struts2+JQuery+Json实例(1)

摘要: 代码重新整理

结合使用jQuery和Json的话感觉不错，操作上来说很方便，先简单说说Json的一些优点，当然Json不仅仅这些优点。

1.方便前台数据的操作。

2.数据体积小，传输快。

3.客户端操纵XML的时候需要创建ActiveX对象，Json则完全就是一个JS对象，它不需要创建DOM。

下面是一个简单的例子，大家可以参考一下，主要功能有：1.获取js值、2.获取单个值、3.获取对象值、4.获取List对象、5.获取Map对象。

具体代码如下：

JsonJqueryStruts2Action.java

package struts2jsonjquery.test.action;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import struts2jsonjquery.test.entity.UserInfo;

import com.opensymphony.xwork2.ActionSupport;

public class JsonJqueryStruts2Action extends ActionSupport {

private static final long serialVersionUID = 3518833679938898354L;

private String message; // 使用json返回单个值

private UserInfo userInfo; // 使用json返回对象

private List<UserInfo> userInfosList; // 使用josn返回List对象

private Map<String, UserInfo> userInfosMap; // 使用json返回Map对象

/**
*
* <p>
*
* 返回单个值
*
* <p>
*
* @return
*/

public String returnMessage() {

this.message = "return single vaule: struts2JqueryJson";

return "message";

}

/**
*
* <p>
*
* 返回UserInfo对象
*
* </p>
*
* @return
*/

public String returnUserInfo() {

userInfo = new UserInfo();

userInfo.setUserId(10000);

userInfo.setUserName("lorde royals");

userInfo.setPassword("royals");

return "userInfo";

}

/**
*
* <p>
*
* 返回List对象
*
* </p>
*
* @return
*/

public String returnList() {

userInfosList = new ArrayList<UserInfo>();

UserInfo u1 = new UserInfo();

u1.setUserId(10000);

u1.setUserName("lorde royals");

u1.setPassword("royals");

UserInfo u2 = new UserInfo();

u2.setUserId(10001);

u2.setUserName("kim sung ryoung");

u2.setPassword("ryoung");

UserInfo u3 = new UserInfo();

u3.setUserId(10002);

u3.setUserName("jordan carver");

u3.setPassword("jordan");

UserInfo u4 = new UserInfo();

u4.setUserId(10003);

u4.setUserName("Michael Jordan");

u4.setPassword("Michael");

userInfosList.add(u1);

userInfosList.add(u2);

userInfosList.add(u3);

userInfosList.add(u4);

return "list";

}

/**
*
* <p>
*
* 返回Map对象
*
* </p>
*
* @return
*/

public String returnMap() {

userInfosMap = new HashMap<String, UserInfo>();

UserInfo u1 = new UserInfo();

u1.setUserId(10000);

u1.setUserName("Michael Jordan");

u1.setPassword("Jordan");

UserInfo u2 = new UserInfo();

u2.setUserId(10001);

u2.setUserName("Scottie Pippen");

u2.setPassword("Pippen");

UserInfo u3 = new UserInfo();

u3.setUserId(10002);

u3.setUserName("Dennis Rodman");

u3.setPassword("Rodman");

UserInfo u4 = new UserInfo();

u4.setUserId(10003);

u4.setUserName("Toni Kukoc");

u4.setPassword("Kukoc");

UserInfo u5 = new UserInfo();

u5.setUserId(10004);

u5.setUserName("Steve Kerr");

u5.setPassword("Kerr");

userInfosMap.put(u1.getUserId() + "", u1);

userInfosMap.put(u2.getUserId() + "", u2);

userInfosMap.put(u3.getUserId() + "", u3);

userInfosMap.put(u4.getUserId() + "", u4);

userInfosMap.put(u5.getUserId() + "", u5);

return "map";

}

/**
*
* <p>
*
* 获得对象，也就是通过表达获得对象(异步的)
*
* </P>
*
* @return
*/

public String gainUserInfo() {

System.out.println("UserID：" + userInfo.getUserId());

System.out.println("UserName：" + userInfo.getUserName());

System.out.println("Password：" + userInfo.getPassword());

return "userInfo";

}

public String getMessage() {

return message;

}

public void setMessage(String message) {

this.message = message;

}

public UserInfo getUserInfo() {

return userInfo;

}

public void setUserInfo(UserInfo userInfo) {

this.userInfo = userInfo;

}

public List<UserInfo> getUserInfosList() {

return userInfosList;

}

public void setUserInfosList(List<UserInfo> userInfosList) {

this.userInfosList = userInfosList;

}

public Map<String, UserInfo> getUserInfosMap() {

return userInfosMap;

}

public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {

this.userInfosMap = userInfosMap;

}

}

UserInfo.java

package struts2jsonjquery.test.entity;

public class UserInfo {

private int userId;

private String userName;

private String password;

public void setUserId(int i) {
userId = i;

}

public void setUserName(String string) {
userName = string;

}

public void setPassword(String string) {
password = string;
}

public int getUserId() {
return userId;
}

public String getPassword() {
return password;
}

public String getUserName() {
return userName;
}

}

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.custom.i18n.resources" value="UTF-8" />
<package name="default" namespace="/" extends="json-default">
<action name="jsontest"
class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">

<!-- 返回单个值的result -->

<result name="message" type="json"></result>

<!-- 返回UserInfo对象的 -->

<result name="userInfo" type="json"></result>

<!-- 返回List对象的 -->

<result name="list" type="json"></result>

<!-- 返回Map对象的 -->

<result name="map" type="json"></result>

</action>

</package>

</struts>

json.js

$(document).ready(
function() {

// 为获获取js值注册鼠标单击事件

$("#getJsData").click(
function() {

$.getJSON("js/test.js", function(data) {

// 通过.操作符可以从data.message中获得Action中message的值

$("#message").html(
"<font color='red'>用户名:" + data.name
+ "人生目标:" + data.job + "</font>");

});

});

// 为获取单个值的按钮注册鼠标单击事件

$("#getMessage").click(
function() {

$.getJSON("jsontest!returnMessage.action", function(
data) {

// 通过.操作符可以从data.message中获得Action中message的值

$("#message").html(
"<font color='red'>" + data.message
+ "</font>");

});

});

// 为获取UserInfo对象按钮添加鼠标单击事件

$("#getUserInfo").click(
function() {

$.getJSON("jsontest!returnUserInfo.action", function(
data) {

// 清空显示层中的数据

$("#message").html("");

// 为显示层添加获取到的数据

// 获取对象的数据用data.userInfo.属性

$("#message").append(
"<div><font color='red'>UserID:"
+ data.userInfo.userId
+ "</font></div>")

.append(
"<div><font color='red'>UserName:"
+ data.userInfo.userName
+ "</font></div>")

.append(
"<div><font color='red'>Password:"
+ data.userInfo.password
+ "</font></div>")

});

});

// 为获取List对象按钮添加鼠标单击事件

$("#getList").click(
function() {

$.getJSON("jsontest!returnList.action", function(data) {

// 清空显示层中的数据

$("#message").html("");

// 使用jQuery中的each(data,function(){});函数

// 从data.userInfosList获取UserInfo对象放入value之中

$.each(data.userInfosList, function(i, value) {

$("#message").append(
"<div>No. " + (i + 1) + " User:</div>")

.append(
"<div><font color='red'>UserID:"
+ value.userId
+ "</font></div>")

.append(
"<div><font color='red'>UserName:"
+ value.userName
+ "</font></div>")

.append(
"<div><font color='red'>Password:"
+ value.password
+ "</font></div>");

});

});

});

// 为获取Map对象按钮添加鼠标单击事件

$("#getMap").click(
function() {

$.getJSON("jsontest!returnMap.action", function(data) {

// 清空显示层中的数据

$("#message").html("");

// 使用jQuery中的each(data,function(){});函数

// 从data.userInfosList获取UserInfo对象放入value之中

// key值为Map的键值

$.each(data.userInfosMap, function(key, value) {

$("#message").append(
"<div><font color='red'>UserID:"
+ value.userId
+ "</font></div>")

.append(
"<div><font color='red'>UserName:"
+ value.userName
+ "</font></div>")

.append(
"<div><font color='red'>Password:"
+ value.password
+ "</font></div>");

});

});

});

// 向服务器发送表达数据

$("#regRe").click(
function() {

// 把表单的数据进行序列化

var params = $("form").serialize();

// 使用jQuery中的$.ajax({});Ajax方法

$.ajax( {

url : "jsontest!gainUserInfo.action",

type : "POST",

data : params,

dataType : "json",

success : function(data) {

// 清空显示层中的数据

$("#message").html("");

// 为显示层添加获取到的数据

// 获取对象的数据用data.userInfo.属性

$("#message").append(
"<div><font color='red'>UserID:"
+ data.userInfo.userId
+ "</font></div>")

.append(
"<div><font color='red'>UserName:"
+ data.userInfo.userName
+ "</font></div>")

.append(
"<div><font color='red'>Password:"
+ data.userInfo.password
+ "</font></div>")

}

});

});

});