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頁面佈局實例