結合使用jQuery和Json的話感覺不錯,操作上來說很方便,先簡單說說Json的一些優點,當然Json不僅僅這些優點。
1.方便前臺數據的操作。
2.數據體積小,傳輸快。
3.客戶端操縱XML的時候需要創建ActiveX對象,Json則完全就是一個JS對象,它不需要創建DOM。
下面是一個簡單的例子,大傢可以參考一下,主要功能有:1.獲取js值、2.獲取單個值、3.獲取對象值、4.獲取List對象、5.獲取Map對象。
具體代碼如下:
先看看控制器Action的代碼。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 "message";
}
/**
* <p>
* 返回UserInfo對象
* </p>
* @return
*/
public String returnUserInfo(){
userInfo = new UserInfo();
userInfo.setUserId(10000);
userInfo.setUserName("柳夢璃");
userInfo.setPassword("liumengli");
return "userInfo";
}
/**
* <p>
* 返回List對象
* </p>
* @return
*/
public String returnList(){
userInfosList = new ArrayList<UserInfo>();
UserInfo u1 = new UserInfo();
u1.setUserId(10000);
u1.setUserName("柳夢璃");
u1.setPassword("liumengli");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("韓菱紗");
u2.setPassword("hanlingsha");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("雲天河");
u3.setPassword("yuntianhe");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("玄霄");
u4.setPassword("xuanxiao");
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("林月如");
u1.setPassword("linyueru");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("趙靈兒");
u2.setPassword("zhaolinger");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("李逍遙");
u3.setPassword("lixiaoyao");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("女媧");
u4.setPassword("nvwa");
userInfosMap.put(u1.getUserId()+"", u1);
userInfosMap.put(u2.getUserId()+"", u2);
userInfosMap.put(u3.getUserId()+"", u3);
userInfosMap.put(u4.getUserId()+"", u4);
return "map";
}
/**
* <p>
* 獲得對象,也就是通過表達獲得對象(異步的)
* </P>
* @return
*/
public String gainUserInfo(){
System.out.println("用戶ID:"+userInfo.getUserId());
System.out.println("用戶名:"+userInfo.getUserName());
System.out.println("密碼:"+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;
}
}
struts2的配置文件也很簡單,需要註意的是得把type設置為json類型。struts.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"https://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>
前臺Jsp提供幾個點擊按鈕事件,當然這個Jsp需要引入jQuer.js文件。index.jsp:
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Struts2+JQuery+JSON</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/json.js"></script>
</head>
<body>
<input id="getJsData" type="button" value="獲取js值"/>
<input id="getMessage" type="button" value="獲取單個值"/>
<input id="getUserInfo" type="button" value="獲取UserInfo對象"/>
<input id="getList" type="button" value="獲取List對象"/>
<input id="getMap" type="button" value="獲取Map對象"/>
<br>
<br>
<br>
<!– 要顯示信息的層–>
<p id="message"></p>
<form>
用戶ID:<input name="userInfo.userId" type="text"/><br/>
用戶名:<input name="userInfo.userName" type="text"/><br/>
密 碼:<input name="userInfo.password" type="text"/><br>
<input id="regRe" type="button" value="註冊"/>
</form>
<s:debug/>
</body>
</html>
最後為上面的Jsp中的按鈕事件註冊單擊事件,這裡把這些事件代碼單獨的放到一個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("<p><font color='red'>用戶ID:"+data.userInfo.userId+"</font></p>")
.append("<p><font color='red'>用戶名:"+data.userInfo.userName+"</font></p>")
.append("<p><font color='red'>密碼:"+data.userInfo.password+"</font></p>")
});
});
//為獲取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("<p>第"+(i+1)+"個用戶:</p>")
.append("<p><font color='red'>用戶ID:"+value.userId+"</font></p>")
.append("<p><font color='red'>用戶名:"+value.userName+"</font></p>")
.append("<p><font color='red'>密碼:"+value.password+"</font></p>");
});
});
});
//為獲取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("<p><font color='red'>用戶ID:"+value.userId+"</font></p>")
.append("<p><font color='red'>用戶名:"+value.userName+"</font></p>")
.append("<p><font color='red'>密碼:"+value.password+"</font></p>");
});
});
});
//向服務器發送表達數據
$("#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("<p><font color='red'>用戶ID:"+data.userInfo.userId+"</font></p>")
.append("<p><font color='red'>用戶名:"+data.userInfo.userName+"</font></p>")
.append("<p><font color='red'>密碼:"+data.userInfo.password+"</font></p>")
}
});
});
});
摘自 tjcyjd的專欄