Struts2+JQuery+Json实例(1)
结合使用jQuery和Json的话感受不错，操做上来讲很方便，先简单说说Json的一些优势，固然Json不单单这些优势。html
1.方便前台数据的操做。java
2.数据体积小，传输快。jquery
3.客户端操纵XML的时候须要建立ActiveX对象，Json则彻底就是一个JS对象，它不须要建立DOM。ajax
下面是一个简单的例子，你们能够参考一下，主要功能有：1.获取js值、2.获取单个值、3.获取对象值、4.获取List对象、5.获取Map对象。apache
具体代码以下：json
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.javaapp
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>")
}
});
});
});
相关文章
- 1. 【shell】实例（1）
- 2. webpack实例1
- 3. hydra实例1
- 4. Python实例：1~5例
- 5. Netty 1-1 入门实例
- 6. 实例恢复（1）
- 7. 贯穿实例(1)
- 8. spark实例1--wordCount
- 9. Redux实例--1 Counter
- 10. 1-3-1页面布局实例
- 更多相关文章...
- • XML DOM 实例 - XML DOM 教程
- • XML 实例 - XML 教程
- • ☆基于Java Instrument的Agent实现
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【shell】实例（1）
- 2. webpack实例1
- 3. hydra实例1
- 4. Python实例：1~5例
- 5. Netty 1-1 入门实例
- 6. 实例恢复（1）
- 7. 贯穿实例(1)
- 8. spark实例1--wordCount
- 9. Redux实例--1 Counter
- 10. 1-3-1页面布局实例