Struts2 json ajax动态显示列表
Struts2 json ajax动态显示列表
lgscofield 发表于2年前
Struts2 json ajax动态显示列表
  • 发表于 2年前
  • 阅读 44
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

 

关于在Struts2中结合json使用ajax进行动态无刷新查询某个列表并在前段显示,这里不是简单的刷新页面的某个属性,而是列表,即对应action中查询出ArrayList转换成json数据在前段通过js处理后来替换页面中某个容器的内容。

对于Struts2与json的基本配置将不在这里记录。下面将通过代码进行一一阐述,其中的关键类JsonUtil是早些时候获得于网络,已忘记原文地址,在此感谢前辈。

struts_member.xml 内容

 

[xhtml]  view plain copy
  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. <struts>  
  6.          <package name="user" extends="json-default" namespace="/user">  
  7.             <action name="qryOrder" class="productAction" method="qryOrder">  
  8.             <interceptor-ref name="params"/>  
  9.                 <result type="json"></result>  
  10.             </action>  
  11.         </package>  
  12. </struts>  

 

其中json-default已经extends struts_base.xml

applicationContext.xml 申明action和service

 

[xhtml]  view plain copy
  1. <?xml version="1.0" encoding="ISO-8859-1"?>  
  2. <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">  
  3. <beans>  
  4.     .  
  5.     .  
  6.     .  
  7.     .  
  8.     .  
  9.     .  
  10.     <!-- Services -->  
  11.       
  12.     <bean id="orderService" parent="transactionProxy">  
  13.       <property name="target">  
  14.         <ref bean="orderTarget"/>  
  15.       </property>  
  16.     </bean>  
  17.       
  18.     <bean id="productAction" class="com.app.web.actions.ProductAction" singleton="false">  
  19.         <property name="orderService">  
  20.             <ref bean="orderService"/>  
  21.         </property>  
  22.     </bean>  
  23. </beans>  

 

ProductAction 内容

 

[java]  view plain copy
  1. package com.app.web.actions;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import org.apache.log4j.Logger;  
  5. import org.apache.struts2.ServletActionContext;  
  6. import com.googlecode.jsonplugin.annotations.JSON;  
  7. import com.netshop.comm.Constant;  
  8. import com.netshop.comm.JsonUtil;  
  9. import com.netshop.comm.lucene.ArticleSearchUtil;  
  10. import com.netshop.model.member.MemberService;  
  11. import com.netshop.model.order.IOrderService;  
  12. import com.netshop.model.order.Order;  
  13. import com.netshop.model.product.IProductService;  
  14. import com.netshop.web.baseaction.AbstractAction;  
  15. public class ProductAction extends AbstractAction{  
  16.     static Logger log = Logger.getLogger(ProductAction.class);  
  17.       
  18.     private IOrderService orderService;  
  19.     private List<Order> orderList;  
  20.     private int proId;  
  21.     private String jsonResult;  
  22.       
  23.     /** 
  24.      * 查询订单列表 
  25.      * @return  
  26.      * @throws Exception 
  27.      */  
  28.     public String qryOrder() throws Exception{  
  29.         try{  
  30.                         //查询  
  31.             StringBuffer sql = new StringBuffer("SELECT m.email,m.level,o.proNum,o.orderTime FROM  Order AS o ,Member AS m WHERE o.productId=");  
  32.             sql.append(proId).append(" AND o.status=").append(Constant.WAIT_BUYER_GOTO_PAY).append(" AND o.memberId=m.id");  
  33.             ArrayList list = (ArrayList) orderService.find(sql.toString());  
  34.            //对查询结果进行处理  
  35.             if(list!=null && list.size()>0){  
  36.                 orderList = new ArrayList<Order>();  
  37.                 for(int i=0;i<list.size();i++){  
  38.                     Object obj[] = (Object[])list.get(i);  
  39.                     if(obj!=null && obj.length==4){  
  40.                               //将查询结果存入order   
  41.                         Order order = new Order();  
  42.                         order.setMemberEmail((String)obj[0]);  
  43.                         order.setMemberLevel(((Integer)obj[1]).intValue());  
  44.                         order.setProNum((Integer)obj[2]);  
  45.                         order.setOrderTime((java.util.Date)obj[3]);  
  46.                              //将order实例存入list  
  47.                         orderList.add(order);  
  48.                     }  
  49.                 }  
  50.             }  
  51.         //orderList借用工具类转化成json类型的串  
  52.             jsonResult = JsonUtil.listToJson(orderList);  
  53.         //申明返回的结果,不然页面上不能显示  
  54.             ServletActionContext.getResponse().setContentType("text/xml");  
  55.         }catch(Exception e){  
  56.             log.info("qryOrder Exception="+e.getMessage());  
  57.             e.fillInStackTrace();  
  58.         }  
  59.         return SUCCESS;  
  60.     }  
  61.       
  62.     @JSON (serialize = false)  
  63.     public IOrderService getOrderService() {  
  64.         return orderService;  
  65.     }  
  66.     public void setOrderService(IOrderService orderService) {  
  67.         this.orderService = orderService;  
  68.     }  
  69.     public List<Order> getOrderList() {  
  70.         return orderList;  
  71.     }  
  72.     public void setOrderList(List<Order> orderList) {  
  73.         this.orderList = orderList;  
  74.     }  
  75.     public int getProId() {  
  76.         return proId;  
  77.     }  
  78.     public void setProId(int proId) {  
  79.         this.proId = proId;  
  80.     }  
  81.     public String getJsonResult() {  
  82.         return jsonResult;  
  83.     }  
  84.     public void setJsonResult(String jsonResult) {  
  85.         this.jsonResult = jsonResult;   

 

Order 类

里面对应的相关属性以及setter,getter方法,将不在说明

JsonUtil 类代码如下:

 

[java]  view plain copy
  1. package com.app.comm;  
  2. import java.beans.IntrospectionException;  
  3. import java.beans.Introspector;  
  4. import java.beans.PropertyDescriptor;  
  5. import java.util.List;  
  6. public class JsonUtil {  
  7.     /** 
  8.      * @param object 
  9.      *            任意对象 
  10.      * @return java.lang.String 
  11.      */  
  12.     public static String objectToJson(Object object) {  
  13.         StringBuilder json = new StringBuilder();  
  14.         if (object == null) {  
  15.             json.append("/"/"");  
  16.         } else if (object instanceof String || object instanceof Integer || object instanceof Double) {  
  17.             json.append("/"").append((String)object).append("/"");  
  18.         } else {  
  19.             json.append(beanToJson(object));  
  20.         }  
  21.         return json.toString();  
  22.     }  
  23.     /** 
  24.      * 功能描述:传入任意一个 javabean 对象生成一个指定规格的字符串 
  25.      *  
  26.      * @param bean 
  27.      *            bean对象 
  28.      * @return String 
  29.      */  
  30.     public static String beanToJson(Object bean) {  
  31.         StringBuilder json = new StringBuilder();  
  32.         json.append("{");  
  33.         PropertyDescriptor[] props = null;  
  34.         try {  
  35.             props = Introspector.getBeanInfo(bean.getClass(), Object.class)  
  36.                     .getPropertyDescriptors();  
  37.         } catch (IntrospectionException e) {  
  38.         }  
  39.         if (props != null) {  
  40.             for (int i = 0; i < props.length; i++) {  
  41.                 try {  
  42.                     String name = objectToJson(props[i].getName());  
  43.                     String value = objectToJson(props[i].getReadMethod().invoke(bean));  
  44.                     json.append(name);  
  45.                     json.append(":");  
  46.                     json.append(value);  
  47.                     json.append(",");  
  48.                 } catch (Exception e) {  
  49.                 }  
  50.             }  
  51.             json.setCharAt(json.length() - 1'}');  
  52.         } else {  
  53.             json.append("}");  
  54.         }  
  55.         return json.toString();  
  56.     }  
  57.     /** 
  58.      * 功能描述:通过传入一个列表对象,调用指定方法将列表中的数据生成一个JSON规格指定字符串 
  59.      *  
  60.      * @param list 
  61.      *            列表对象 
  62.      * @return java.lang.String 
  63.      */  
  64.     public static String listToJson(List<?> list) {  
  65.         StringBuilder json = new StringBuilder();  
  66.         json.append("[");  
  67.         if (list != null && list.size() > 0) {  
  68.             for (Object obj : list) {  
  69.                 json.append(objectToJson(obj));  
  70.                 json.append(",");  
  71.             }  
  72.             json.setCharAt(json.length() - 1']');  
  73.         } else {  
  74.             json.append("]");  
  75.         }  
  76.         System.out.println("----------"+json.toString());  
  77.         return json.toString();  
  78.     }  
  79. }  

 

页面JS部分 :

 

[javascript]  view plain copy
  1. //查询购物车中的商品  
  2. function qryOrder(proId){  
  3.     $.ajax({  
  4.         type: "POST",  
  5.         url: "user/qryOrder.do?proId="+proId,  
  6.         data: "",  
  7.         datatype: "json",  
  8.         contentType: "application/json",  
  9.         success: function(jsonResult) {  
  10.             qryOrderCallBack(jsonResult);  
  11.         },  
  12.         error: function(msg) {  
  13.             location = "../error.jsp";  
  14.             //alert("操作失败,请重试"+msg)   
  15.         }  
  16.     });  
  17. }  
  18. //解析返回得json数据并给页面赋值  
  19. function qryOrderCallBack(responseMsg){  
  20.     var data = eval("("+responseMsg+")");  
  21.     var order = eval(data.orderList);  
  22.     var result = "";  
  23.     if(order==null){  
  24.         alert('order is null');  
  25.         return;  
  26.     }  
  27.     result += "<thead>";  
  28.     result += "<tr class='thead'>";  
  29.     result += "<th scope='col' class='t1'>购买人</th>";  
  30.     result += "<th scope='col' class='t2'>会员级别</th>";  
  31.     result += "<th scope='col' class='t4'>数量</th>";  
  32.     result += "<th scope='col' class='t3'>购买时间</th>";  
  33.     result += "</tr>";  
  34.     result += "</thead>";  
  35.     result += "<tbody>";  
  36.         //这里的order[i]就相当于list中的order,起属性也是一一对应的  
  37.     for(var i=0;i<order.length;i++) {  
  38.         var num = order[i].num;  
  39.         if((i+1)%2==1){  
  40.             result += "<tr class=''>";  
  41.         }else if((i+1)%2==0){  
  42.             result += "<tr class='alt'>";  
  43.         }  
  44.         result += "<td>"+order[i].memberEmail+"***</td>";  
  45.         result += "<td>"+order[i].memberLevel+"</td>";  
  46.         result += "<td>"+order[i].proNum+"</td>";  
  47.         result += "<td class='lower tr'>"+order[i].orderTime+"</td>";  
  48.         result += "</tr>";  
  49.     }  
  50.     result += "</tbody>";  
  51.     $("#orderList").html(result);  
  52. }  

 

页面HTML部分

 

[xhtml]  view plain copy
  1. <div  id="buy-annal">  
  2.                       
  3.                     <table class="buy-record" summary="客户购买记录" cellspacing="0" id='orderList'>  
  4.                           
  5.                     </table>  
  6.                 </div>  

 

 

上面说的是将后台查询的LIST结果如何在前台无刷新进行显示,而对于后台处理结果的普通的JAVABEAN如何在前台显示 ,下面进行简单的进行记录:

比如后台action处理的bean:

CartInfo cartInfo = new CartInfo();
cartInfo.setTotalNum(totalNum);
cartInfo.setTotalFee(df.format(totalFee));

在js中的处理:

//解析返回得json数据并给页面赋值
function responseCallBack(responseMsg){
      var data = eval("("+responseMsg+")");

     //cartInfo 就相当于cartInfo 实例
      var cartInfo = eval(data.cartInfo);
      $("#totalNum").text(cartInfo.totalNum+" 件");
      $("#totalFee").text("¥ "+cartInfo.totalFee);
      .......
}

共有 人打赏支持
lgscofield
粉丝 20
博文 105
码字总数 62676
×
lgscofield
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: