zoukankan      html  css  js  c++  java

  • struts jquery json 异步加载

    引用：http://qsfwy.iteye.com/blog/682796

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

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

    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>  

    前台：

    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>  

    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. });  

     注意：JSON插件会把所有包含getter方法的属性都序列化到返回结果中，所以Action中的其他execute方法都不要把名

           字加get前缀。

    可以下载工程文件
  • 相关阅读:
    Educational Codeforces Round 10 C. Foe Pairs 水题
    Educational Codeforces Round 10 B. z-sort 构造
    CDOJ 1048 Bob's vector 三分
    Educational Codeforces Round 10 A. Gabriel and Caterpillar 模拟
    第14届电子科大初赛民间盗版部分题目题解
    HDU 5654 xiaoxin and his watermelon candy 离线树状数组 区间不同数的个数
    HDU 5653 Bomber Man wants to bomb an Array. dp
    HDU 5652 India and China Origins 二分+并查集
    HDU 5651 xiaoxin juju needs help 数学
    HDU 5650 so easy 数学
  • 原文地址：https://www.cnblogs.com/sode/p/2421210.html
Copyright © 2011-2022 走看看