`
hslh22
  • 浏览: 78352 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

struts2 json jquery 异步

阅读更多
2011-02-16

struts2 json jquery 异步

文章分类:Java编程
2010-06-03
Struts2+jQuery+JSON实现异步交互
文章分类:Java编程
Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值、对象、List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定。

第一步:在MyEclipse中创建JavaWeb工厂并把Struts2 和 json的jar包添加到工程中添加完成后的工程图是:



第二步:创建后台:

  1. UserInfo实体类:

 

Userinfo实体类代码 
1.package struts2jsonjquery.test.entity;  
2. 
3.import java.io.Serializable;  
4./**  
5. * <p>  
6. *  用户实体类  
7. * </p>  
8. * @author 朱延伟  
9. *  
10. */  
11.public class UserInfo implements Serializable {  
12. 
13.    private static final long serialVersionUID = 3952189513312630860L;  
14.      
15.    private int userId;  
16.    private String userName;  
17.    private String password;  
18.    public int getUserId() {  
19.        return userId;  
20.    }  
21.    public void setUserId(int userId) {  
22.        this.userId = userId;  
23.    }  
24.    public String getUserName() {  
25.        return userName;  
26.    }  
27.    public void setUserName(String userName) {  
28.        this.userName = userName;  
29.    }  
30.    public String getPassword() {  
31.        return password;  
32.    }  
33.    public void setPassword(String password) {  
34.        this.password = password;  
35.    }  
36.} 
Userinfo实体类代码
1.package struts2jsonjquery.test.entity;  
2. 
3.import java.io.Serializable;  
4./**  
5. * <p>  
6. *  用户实体类  
7. * </p>  
8. * @author 朱延伟  
9. *  
10. */  
11.public class UserInfo implements Serializable {  
12. 
13.    private static final long serialVersionUID = 3952189513312630860L;  
14.      
15.    private int userId;  
16.    private String userName;  
17.    private String password;  
18.    public int getUserId() {  
19.        return userId;  
20.    }  
21.    public void setUserId(int userId) {  
22.        this.userId = userId;  
23.    }  
24.    public String getUserName() {  
25.        return userName;  
26.    }  
27.    public void setUserName(String userName) {  
28.        this.userName = userName;  
29.    }  
30.    public String getPassword() {  
31.        return password;  
32.    }  
33.    public void setPassword(String password) {  
34.        this.password = password;  
35.    }  
36.} 
package struts2jsonjquery.test.entity;

import java.io.Serializable;
/**
* <p>
* 用户实体类
* </p>
* @author 朱延伟
*
*/
public class UserInfo implements Serializable {

private static final long serialVersionUID = 3952189513312630860L;

private int userId;
private String userName;
private String password;
public int getUserId() {
return userId;
}
public void setUserId(int userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}


2. Action类

Action类代码 
1.package struts2jsonjquery.test.action;  
2. 
3.import java.util.ArrayList;  
4.import java.util.HashMap;  
5.import java.util.List;  
6.import java.util.Map;  
7. 
8.import struts2jsonjquery.test.entity.UserInfo;  
9. 
10.import com.opensymphony.xwork2.ActionSupport;  
11. 
12.public class JsonJqueryStruts2Action extends ActionSupport {  
13. 
14.    private static final long serialVersionUID = 3518833679938898354L;  
15.      
16.    private String message;     //使用json返回单个值  
17.    private UserInfo userInfo;      //使用json返回对象  
18.    private List<UserInfo> userInfosList;     //使用josn返回List对象  
19.    private Map<String,UserInfo> userInfosMap;    //使用json返回Map对象  
20.    //为上面的的属性提供get,Set方法  
21.    public String getMessage() {  
22.        return message;  
23.    }  
24.    public void setMessage(String message) {  
25.        this.message = message;  
26.    }  
27.    public UserInfo getUserInfo() {  
28.        return userInfo;  
29.    }  
30.    public void setUserInfo(UserInfo userInfo) {  
31.        this.userInfo = userInfo;  
32.    }  
33.    public List<UserInfo> getUserInfosList() {  
34.        return userInfosList;  
35.    }  
36.    public void setUserInfosList(List<UserInfo> userInfosList) {  
37.        this.userInfosList = userInfosList;  
38.    }  
39.    public Map<String, UserInfo> getUserInfosMap() {  
40.        return userInfosMap;  
41.    }  
42.    public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {  
43.        this.userInfosMap = userInfosMap;  
44.    }  
45.    /**  
46.     * <p>  
47.     *  返回单个值  
48.     * <p>  
49.     * @return  
50.     */  
51.    public String returnMessage(){  
52.        this.message = "成功返回单个值";   
53.        return "message";   
54.    }  
55.    /**  
56.     * <p>  
57.     *  返回UserInfo对象  
58.     * </p>  
59.     * @return  
60.     */  
61.    public String returnUserInfo(){  
62.        userInfo = new UserInfo();  
63.        userInfo.setUserId(10000);   
64.        userInfo.setUserName("张三");   
65.        userInfo.setPassword("000000");   
66.        return "userInfo";   
67.    }  
68.    /**  
69.     * <p>  
70.     *  返回List对象  
71.     * </p>  
72.     * @return  
73.     */  
74.    public String returnList(){  
75.        userInfosList = new ArrayList<UserInfo>();  
76.        UserInfo u1 = new UserInfo();  
77.        u1.setUserId(10000);   
78.        u1.setUserName("张三");   
79.        u1.setPassword("000000");   
80.        UserInfo u2 = new UserInfo();  
81.        u2.setUserId(10001);   
82.        u2.setUserName("李四");   
83.        u2.setPassword("111111");   
84.        UserInfo u3 = new UserInfo();  
85.        u3.setUserId(10002);   
86.        u3.setUserName("王五");   
87.        u3.setPassword("222222");   
88.        UserInfo u4 = new UserInfo();  
89.        u4.setUserId(10003);   
90.        u4.setUserName("赵六");   
91.        u4.setPassword("333333");   
92.        userInfosList.add(u1);  
93.        userInfosList.add(u2);  
94.        userInfosList.add(u3);  
95.        userInfosList.add(u4);  
96.        return "list";   
97.    }  
98.    /**  
99.     * <p>  
100.     *  返回Map对象  
101.     * </p>  
102.     * @return  
103.     */  
104.    public String returnMap(){  
105.        userInfosMap = new HashMap<String,UserInfo>();  
106.        UserInfo u1 = new UserInfo();  
107.        u1.setUserId(10000);   
108.        u1.setUserName("张三");   
109.        u1.setPassword("000000");   
110.        UserInfo u2 = new UserInfo();  
111.        u2.setUserId(10001);   
112.        u2.setUserName("李四");   
113.        u2.setPassword("111111");   
114.        UserInfo u3 = new UserInfo();  
115.        u3.setUserId(10002);   
116.        u3.setUserName("王五");   
117.        u3.setPassword("222222");   
118.        UserInfo u4 = new UserInfo();  
119.        u4.setUserId(10003);   
120.        u4.setUserName("赵六");   
121.        u4.setPassword("333333");   
122.        userInfosMap.put(u1.getUserId()+"", u1);   
123.        userInfosMap.put(u2.getUserId()+"", u2);   
124.        userInfosMap.put(u3.getUserId()+"", u3);   
125.        userInfosMap.put(u4.getUserId()+"", u4);   
126.        return "map";   
127.    }  
128.    /**  
129.     * <p>  
130.     *  获得对象,也就是通过表达获得对象(异步的)  
131.     * </P>  
132.     * @return  
133.     */  
134.    public String gainUserInfo(){  
135.        System.out.println("用户ID:"+userInfo.getUserId());   
136.        System.out.println("用户名:"+userInfo.getUserName());   
137.        System.out.println("密码:"+userInfo.getPassword());   
138.        return "userInfo";   
139.    }  
140.    /**  
141.     * 获得单个值就不用写了和平常一样  
142.     */  
143.} 
Action类代码
1.package struts2jsonjquery.test.action;  
2. 
3.import java.util.ArrayList;  
4.import java.util.HashMap;  
5.import java.util.List;  
6.import java.util.Map;  
7. 
8.import struts2jsonjquery.test.entity.UserInfo;  
9. 
10.import com.opensymphony.xwork2.ActionSupport;  
11. 
12.public class JsonJqueryStruts2Action extends ActionSupport {  
13. 
14.    private static final long serialVersionUID = 3518833679938898354L;  
15.      
16.    private String message;     //使用json返回单个值  
17.    private UserInfo userInfo;      //使用json返回对象  
18.    private List<UserInfo> userInfosList;     //使用josn返回List对象  
19.    private Map<String,UserInfo> userInfosMap;    //使用json返回Map对象  
20.    //为上面的的属性提供get,Set方法  
21.    public String getMessage() {  
22.        return message;  
23.    }  
24.    public void setMessage(String message) {  
25.        this.message = message;  
26.    }  
27.    public UserInfo getUserInfo() {  
28.        return userInfo;  
29.    }  
30.    public void setUserInfo(UserInfo userInfo) {  
31.        this.userInfo = userInfo;  
32.    }  
33.    public List<UserInfo> getUserInfosList() {  
34.        return userInfosList;  
35.    }  
36.    public void setUserInfosList(List<UserInfo> userInfosList) {  
37.        this.userInfosList = userInfosList;  
38.    }  
39.    public Map<String, UserInfo> getUserInfosMap() {  
40.        return userInfosMap;  
41.    }  
42.    public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {  
43.        this.userInfosMap = userInfosMap;  
44.    }  
45.    /**  
46.     * <p>  
47.     *  返回单个值  
48.     * <p>  
49.     * @return  
50.     */  
51.    public String returnMessage(){  
52.        this.message = "成功返回单个值";  
53.        return "message";  
54.    }  
55.    /**  
56.     * <p>  
57.     *  返回UserInfo对象  
58.     * </p>  
59.     * @return  
60.     */  
61.    public String returnUserInfo(){  
62.        userInfo = new UserInfo();  
63.        userInfo.setUserId(10000);  
64.        userInfo.setUserName("张三");  
65.        userInfo.setPassword("000000");  
66.        return "userInfo";  
67.    }  
68.    /**  
69.     * <p>  
70.     *  返回List对象  
71.     * </p>  
72.     * @return  
73.     */  
74.    public String returnList(){  
75.        userInfosList = new ArrayList<UserInfo>();  
76.        UserInfo u1 = new UserInfo();  
77.        u1.setUserId(10000);  
78.        u1.setUserName("张三");  
79.        u1.setPassword("000000");  
80.        UserInfo u2 = new UserInfo();  
81.        u2.setUserId(10001);  
82.        u2.setUserName("李四");  
83.        u2.setPassword("111111");  
84.        UserInfo u3 = new UserInfo();  
85.        u3.setUserId(10002);  
86.        u3.setUserName("王五");  
87.        u3.setPassword("222222");  
88.        UserInfo u4 = new UserInfo();  
89.        u4.setUserId(10003);  
90.        u4.setUserName("赵六");  
91.        u4.setPassword("333333");  
92.        userInfosList.add(u1);  
93.        userInfosList.add(u2);  
94.        userInfosList.add(u3);  
95.        userInfosList.add(u4);  
96.        return "list";  
97.    }  
98.    /**  
99.     * <p>  
100.     *  返回Map对象  
101.     * </p>  
102.     * @return  
103.     */  
104.    public String returnMap(){  
105.        userInfosMap = new HashMap<String,UserInfo>();  
106.        UserInfo u1 = new UserInfo();  
107.        u1.setUserId(10000);  
108.        u1.setUserName("张三");  
109.        u1.setPassword("000000");  
110.        UserInfo u2 = new UserInfo();  
111.        u2.setUserId(10001);  
112.        u2.setUserName("李四");  
113.        u2.setPassword("111111");  
114.        UserInfo u3 = new UserInfo();  
115.        u3.setUserId(10002);  
116.        u3.setUserName("王五");  
117.        u3.setPassword("222222");  
118.        UserInfo u4 = new UserInfo();  
119.        u4.setUserId(10003);  
120.        u4.setUserName("赵六");  
121.        u4.setPassword("333333");  
122.        userInfosMap.put(u1.getUserId()+"", u1);  
123.        userInfosMap.put(u2.getUserId()+"", u2);  
124.        userInfosMap.put(u3.getUserId()+"", u3);  
125.        userInfosMap.put(u4.getUserId()+"", u4);  
126.        return "map";  
127.    }  
128.    /**  
129.     * <p>  
130.     *  获得对象,也就是通过表达获得对象(异步的)  
131.     * </P>  
132.     * @return  
133.     */  
134.    public String gainUserInfo(){  
135.        System.out.println("用户ID:"+userInfo.getUserId());  
136.        System.out.println("用户名:"+userInfo.getUserName());  
137.        System.out.println("密码:"+userInfo.getPassword());  
138.        return "userInfo";  
139.    }  
140.    /**  
141.     * 获得单个值就不用写了和平常一样  
142.     */  
143.} 
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对象
//为上面的的属性提供get,Set方法
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;
}
/**
* <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("000000");
return "userInfo";
}
/**
* <p>
* 返回List对象
* </p>
* @return
*/
public String returnList(){
userInfosList = new ArrayList<UserInfo>();
UserInfo u1 = new UserInfo();
u1.setUserId(10000);
u1.setUserName("张三");
u1.setPassword("000000");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("李四");
u2.setPassword("111111");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("王五");
u3.setPassword("222222");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("赵六");
u4.setPassword("333333");
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("000000");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("李四");
u2.setPassword("111111");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("王五");
u3.setPassword("222222");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("赵六");
u4.setPassword("333333");
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";
}
/**
* 获得单个值就不用写了和平常一样
*/
}


3.  struts.xml



Struts.xml代码 
1.<?xml version="1.0" encoding="UTF-8" ?>  
2.<!DOCTYPE struts PUBLIC  
3.    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.    "http://struts.apache.org/dtds/struts-2.0.dtd">   
5. 
6.<struts>  
7. 
8.    <package name="default" namespace="/" extends="json-default">   
9.        <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">   
10.            <!-- 返回单个值的result -->  
11.            <result name="message" type="json"></result>   
12.            <!-- 返回UserInfo对象的 -->  
13.            <result name="userInfo" type="json"></result>   
14.            <!-- 返回List对象的 -->  
15.            <result name="list" type="json"></result>   
16.            <!-- 返回Map对象的 -->  
17.            <result name="map" type="json"></result>   
18.        </action>  
19.    </package>  
20.</struts> 
Struts.xml代码
1.<?xml version="1.0" encoding="UTF-8" ?>  
2.<!DOCTYPE struts PUBLIC  
3.    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
4.    "http://struts.apache.org/dtds/struts-2.0.dtd">  
5. 
6.<struts>  
7. 
8.    <package name="default" namespace="/" extends="json-default">  
9.        <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">  
10.            <!-- 返回单个值的result -->  
11.            <result name="message" type="json"></result>  
12.            <!-- 返回UserInfo对象的 -->  
13.            <result name="userInfo" type="json"></result>  
14.            <!-- 返回List对象的 -->  
15.            <result name="list" type="json"></result>  
16.            <!-- 返回Map对象的 -->  
17.            <result name="map" type="json"></result>  
18.        </action>  
19.    </package>  
20.</struts> 
<?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>

    <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>


前台:

1.  index.jsp

Html代码 
1.<%@ page language="java" pageEncoding="GBK"%> 
2.<%   
3.    String path = request.getContextPath();   
4.%>  
5. 
6.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
7.<html>  
8.  <head>  
9.      
10.    <title>Struts2+JQuery+JSON</title>  
11.    <meta http-equiv="pragma" content="no-cache">  
12.    <meta http-equiv="cache-control" content="no-cache">  
13.    <meta http-equiv="expires" content="0">       
14.    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
15.    <meta http-equiv="description" content="This is my page">  
16.    <script type="text/javascript" src="<%=path %>/js/jquery.js"></script>  
17.    <script type="text/javascript" src="<%=path %>/js/json.js"></script>  
18.  </head>  
19.    
20.  <body>  
21.    <input id="getMessage" type="button" value="获取单个值"/>&nbsp;&nbsp;   
22.    <input id="getUserInfo" type="button" value="获取UserInfo对象"/>&nbsp;&nbsp;   
23.    <input id="getList" type="button" value="获取List对象"/>&nbsp;&nbsp;   
24.    <input id="getMap" type="button" value="获取Map对象"/>&nbsp;&nbsp;   
25.    <br>  
26.    <br>  
27.    <br>  
28.    <!-- 要显示信息的层 -->  
29.    <div id="message"></div>  
30.    <form>  
31.        用户ID:<input name="userInfo.userId" type="text"/><br/>  
32.        用户名:<input name="userInfo.userName" type="text"/><br/>  
33.        密&nbsp;&nbsp;&nbsp;码:<input name="userInfo.password" type="text"/><br>  
34.        <input id="regRe" type="button" value="注册"/>  
35.    </form>  
36.  </body>  
37.</html>  
Html代码
1.<%@ page language="java" pageEncoding="GBK"%> 
2.<%  
3.    String path = request.getContextPath();  
4.%> 
5. 
6.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
7.<html> 
8.  <head> 
9.      
10.    <title>Struts2+JQuery+JSON</title> 
11.    <meta http-equiv="pragma" content="no-cache"> 
12.    <meta http-equiv="cache-control" content="no-cache"> 
13.    <meta http-equiv="expires" content="0">      
14.    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
15.    <meta http-equiv="description" content="This is my page"> 
16.    <script type="text/javascript" src="<%=path %>/js/jquery.js"></script> 
17.    <script type="text/javascript" src="<%=path %>/js/json.js"></script> 
18.  </head> 
19.    
20.  <body> 
21.    <input id="getMessage" type="button" value="获取单个值"/>&nbsp;&nbsp;  
22.    <input id="getUserInfo" type="button" value="获取UserInfo对象"/>&nbsp;&nbsp;  
23.    <input id="getList" type="button" value="获取List对象"/>&nbsp;&nbsp;  
24.    <input id="getMap" type="button" value="获取Map对象"/>&nbsp;&nbsp;  
25.    <br> 
26.    <br> 
27.    <br> 
28.    <!-- 要显示信息的层 --> 
29.    <div id="message"></div> 
30.    <form> 
31.        用户ID:<input name="userInfo.userId" type="text"/><br/> 
32.        用户名:<input name="userInfo.userName" type="text"/><br/> 
33.        密&nbsp;&nbsp;&nbsp;码:<input name="userInfo.password" type="text"/><br> 
34.        <input id="regRe" type="button" value="注册"/> 
35.    </form> 
36.  </body> 
37.</html> 
<%@ page language="java" pageEncoding="GBK"%>
<%
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="getMessage" type="button" value="获取单个值"/>&nbsp;&nbsp;
    <input id="getUserInfo" type="button" value="获取UserInfo对象"/>&nbsp;&nbsp;
    <input id="getList" type="button" value="获取List对象"/>&nbsp;&nbsp;
    <input id="getMap" type="button" value="获取Map对象"/>&nbsp;&nbsp;
    <br>
    <br>
    <br>
    <!-- 要显示信息的层 -->
    <div id="message"></div>
    <form>
    用户ID:<input name="userInfo.userId" type="text"/><br/>
    用户名:<input name="userInfo.userName" type="text"/><br/>
    密&nbsp;&nbsp;&nbsp;码:<input name="userInfo.password" type="text"/><br>
    <input id="regRe" type="button" value="注册"/>
    </form>
  </body>
</html>


2. json.js

 

Js代码 
1.//初始加载页面时  
2.$(document).ready(function(){   
3. //为获取单个值的按钮注册鼠标单击事件   
4. $("#getMessage").click(function(){   
5.  $.getJSON("jsontest!returnMessage.action",function(data){   
6.   //通过.操作符可以从data.message中获得Action中message的值   
7.   $("#message").html("<font color='red'>"+data.message+"</font>");   
8.  });  
9. });  
10. //为获取UserInfo对象按钮添加鼠标单击事件   
11. $("#getUserInfo").click(function(){   
12.  $.getJSON("jsontest!returnUserInfo.action",function(data){   
13.   //清空显示层中的数据   
14.   $("#message").html("");   
15.   //为显示层添加获取到的数据   
16.   //获取对象的数据用data.userInfo.属性   
17.   $("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")   
18.          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")   
19.          .append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")   
20.  });  
21. });  
22. //为获取List对象按钮添加鼠标单击事件   
23. $("#getList").click(function(){   
24.  $.getJSON("jsontest!returnList.action",function(data){   
25.   //清空显示层中的数据   
26.   $("#message").html("");   
27.   //使用jQuery中的each(data,function(){});函数   
28.   //从data.userInfosList获取UserInfo对象放入value之中   
29.   $.each(data.userInfosList,function(i,value){   
30.    $("#message").append("<div>第"+(i+1)+"个用户:</div>")   
31.       .append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")   
32.          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")   
33.          .append("<div><font color='red'>密码:"+value.password+"</font></div>");   
34.   });  
35.  });  
36. });  
37. //为获取Map对象按钮添加鼠标单击事件   
38. $("#getMap").click(function(){   
39.  $.getJSON("jsontest!returnMap.action",function(data){   
40.   //清空显示层中的数据   
41.   $("#message").html("");   
42.   //使用jQuery中的each(data,function(){});函数   
43.   //从data.userInfosList获取UserInfo对象放入value之中   
44.   //key值为Map的键值   
45.   $.each(data.userInfosMap,function(key,value){   
46.    $("#message").append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")   
47.          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")   
48.          .append("<div><font color='red'>密码:"+value.password+"</font></div>");   
49.   });  
50.  });  
51. });  
52. //向服务器发送表达数据   
53. $("#regRe").click(function(){   
54.  //把表单的数据进行序列化   
55.  var params = $("form").serialize();   
56.  //使用jQuery中的$.ajax({});Ajax方法   
57.  $.ajax({  
58.   url:"jsontest!gainUserInfo.action",   
59.   type:"POST",   
60.   data:params,  
61.   dataType:"json",   
62.   success:function(data){   
63.    //清空显示层中的数据   
64.   $("#message").html("");   
65.   //为显示层添加获取到的数据   
66.   //获取对象的数据用data.userInfo.属性   
67.   $("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")   
68.          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")   
69.          .append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")   
70.   }  
71.  });  
72. });  
73.}); 
Js代码
1.//初始加载页面时  
2.$(document).ready(function(){  
3. //为获取单个值的按钮注册鼠标单击事件  
4. $("#getMessage").click(function(){  
5.  $.getJSON("jsontest!returnMessage.action",function(data){  
6.   //通过.操作符可以从data.message中获得Action中message的值  
7.   $("#message").html("<font color='red'>"+data.message+"</font>");  
8.  });  
9. });  
10. //为获取UserInfo对象按钮添加鼠标单击事件  
11. $("#getUserInfo").click(function(){  
12.  $.getJSON("jsontest!returnUserInfo.action",function(data){  
13.   //清空显示层中的数据  
14.   $("#message").html("");  
15.   //为显示层添加获取到的数据  
16.   //获取对象的数据用data.userInfo.属性  
17.   $("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")  
18.          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")  
19.          .append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")  
20.  });  
21. });  
22. //为获取List对象按钮添加鼠标单击事件  
23. $("#getList").click(function(){  
24.  $.getJSON("jsontest!returnList.action",function(data){  
25.   //清空显示层中的数据  
26.   $("#message").html("");  
27.   //使用jQuery中的each(data,function(){});函数  
28.   //从data.userInfosList获取UserInfo对象放入value之中  
29.   $.each(data.userInfosList,function(i,value){  
30.    $("#message").append("<div>第"+(i+1)+"个用户:</div>")  
31.       .append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")  
32.          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")  
33.          .append("<div><font color='red'>密码:"+value.password+"</font></div>");  
34.   });  
35.  });  
36. });  
37. //为获取Map对象按钮添加鼠标单击事件  
38. $("#getMap").click(function(){  
39.  $.getJSON("jsontest!returnMap.action",function(data){  
40.   //清空显示层中的数据  
41.   $("#message").html("");  
42.   //使用jQuery中的each(data,function(){});函数  
43.   //从data.userInfosList获取UserInfo对象放入value之中  
44.   //key值为Map的键值  
45.   $.each(data.userInfosMap,function(key,value){  
46.    $("#message").append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")  
47.          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")  
48.          .append("<div><font color='red'>密码:"+value.password+"</font></div>");  
49.   });  
50.  });  
51. });  
52. //向服务器发送表达数据  
53. $("#regRe").click(function(){  
54.  //把表单的数据进行序列化  
55.  var params = $("form").serialize();  
56.  //使用jQuery中的$.ajax({});Ajax方法  
57.  $.ajax({  
58.   url:"jsontest!gainUserInfo.action",  
59.   type:"POST",  
60.   data:params,  
61.   dataType:"json",  
62.   success:function(data){  
63.    //清空显示层中的数据  
64.   $("#message").html("");  
65.   //为显示层添加获取到的数据  
66.   //获取对象的数据用data.userInfo.属性  
67.   $("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")  
68.          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")  
69.          .append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")  
70.   }  
71.  });  
72. });  
73.}); 
//初始加载页面时
$(document).ready(function(){
//为获取单个值的按钮注册鼠标单击事件
$("#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'>用户ID:"+data.userInfo.userId+"</font></div>")
          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")
          .append("<div><font color='red'>密码:"+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>第"+(i+1)+"个用户:</div>")
       .append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")
          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")
          .append("<div><font color='red'>密码:"+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'>用户ID:"+value.userId+"</font></div>")
          .append("<div><font color='red'>用户名:"+value.userName+"</font></div>")
          .append("<div><font color='red'>密码:"+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'>用户ID:"+data.userInfo.userId+"</font></div>")
          .append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")
          .append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")
   }
  });
});
}); 注意:JSON插件会把所有包含getter方法的属性都序列化到返回结果中,所以Action中的其他execute方法都不要把名

       字加get前缀。

可以下载工程文件

转自 http://qsfwy.iteye.com/blog/682796
分享到:
评论

相关推荐

    ysoserial-master.zip

    ysoserial是一个用于生成利用不安全的Java对象反序列化的有效负载的概念验证工具。它包含一系列在常见Java库中发现的"gadget chains",可以在特定条件下利用执行不安全的反序列化操作的Java应用程序。ysoserial项目最初在2015年AppSecCali会议上提出,包含针对Apache Commons Collections(3.x和4.x版本)、Spring Beans/Core(4.x版本)和Groovy(2.3.x版本)的利用链

    zigbee CC2530无线自组网协议栈系统代码实现协调器与终端的TI Sensor实验和Monitor使用.zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。

    YOLO算法-自卸卡车-挖掘机-轮式装载机数据集-2644张图像带标签-自卸卡车-挖掘机-轮式装载机.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    Oracle10gDBA学习手册中文PDF清晰版最新版本

    **Oracle 10g DBA学习手册:安装Oracle和构建数据库** **目的:** 本章节旨在指导您完成Oracle数据库软件的安装和数据库的创建。您将通过Oracle Universal Installer (OUI)了解软件安装过程,并学习如何利用Database Configuration Assistant (DBCA)创建附加数据库。 **主题概览:** 1. 利用Oracle Universal Installer (OUI)安装软件 2. 利用Database Configuration Assistant (DBCA)创建数据库 **第2章:Oracle软件的安装与数据库构建** **Oracle Universal Installer (OUI)的运用:** Oracle Universal Installer (OUI)是一个图形用户界面(GUI)工具,它允许您查看、安装和卸载机器上的Oracle软件。通过OUI,您可以轻松地管理Oracle软件的安装和维护。 **安装步骤:** 以下是使用OUI安装Oracle软件并创建数据库的具体步骤:

    消防验收过程服务--现场记录表.doc

    消防验收过程服务--现场记录表.doc

    (4655036)数据库 管理与应用 期末考试题 数据库试题

    数据库管理\09-10年第1学期数据库期末考试试卷A(改卷参考).doc。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    YOLO算法-瓶纸盒合并数据集-3161张图像带标签-纸张-纸箱-瓶子.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    职业暴露后的处理流程.docx

    职业暴露后的处理流程.docx

    Java Web开发短消息系统

    Java Web开发短消息系统

    java毕设项目之ssm基于java和mysql的多角色学生管理系统+jsp(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

    批量导出多项目核心目录工具

    这是一款可以配置过滤目录及过滤的文件后缀的工具,并且支持多个项目同时输出导出,并过滤指定不需要导出的目录及文件后缀。 导出后将会保留原有的路径,并在新的文件夹中体现。

    【图像压缩】基于matlab GUI DCT图像压缩(含MAX MED MIN NONE)【含Matlab源码 9946期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    YOLO算法-挖掘机与火焰数据集-7735张图像带标签-挖掘机.zip

    YOLO算法-挖掘机与火焰数据集-7735张图像带标签-挖掘机.zip

    操作系统实验 Ucore lab5

    操作系统实验 Ucore lab5

    IMG_5950.jpg

    IMG_5950.jpg

    竞选报价评分表.docx

    竞选报价评分表.docx

    java系统,mysql、springboot等框架

    java系统,mysql、springboot等框架

    zigbee CC2530网关+4节点无线通讯实现温湿度、光敏、LED、继电器等传感节点数据的采集上传,网关通过ESP8266上传远程服务器及下发控制.zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。

    YOLO算法-快递衣物数据集-496张图像带标签.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    搜索引擎lucen的相关介绍 从事搜索行业程序研发、人工智能、存储等技术人员和企业

    内容概要:本文详细讲解了搜索引擎的基础原理,特别是索引机制、优化 like 前缀模糊查询的方法、建立索引的标准以及针对中文的分词处理。文章进一步深入探讨了Lucene,包括它的使用场景、特性、框架结构、Maven引入方法,尤其是Analyzer及其TokenStream的实现细节,以及自定义Analyzer的具体步骤和示例代码。 适合人群:数据库管理员、后端开发者以及希望深入了解搜索引擎底层实现的技术人员。 使用场景及目标:适用于那些需要优化数据库查询性能、实施或改进搜索引擎技术的场景。主要目标在于提高数据库的访问效率,实现高效的数据检索。 阅读建议:由于文章涉及大量的技术术语和实现细节,建议在阅读过程中对照实际开发项目,结合示例代码进行实践操作,有助于更好地理解和吸收知识点。

Global site tag (gtag.js) - Google Analytics