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前缀。

    可以下载工程文件
  • 相关阅读:
    oracle数据库表导出
    oracle-11G转10G
    ORACLE-创建用户和表空间
    idea 自定义toString
    springboot整合 mybatis.generator
    Linux mysql8.0.11安装
    助教工作：关于如何使用python+excel快捷生成千帆竞发图
    升级MySQL至最新版本
    Zabbix与Zabbix-agent2部署
    Yarn 的使用
  • 原文地址：https://www.cnblogs.com/sode/p/2421210.html
Copyright © 2011-2022 走看看