Struts2 json ajax动态显示列表

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

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

struts_member.xml 内容

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="user" extends="json-default" namespace="/user"> <action name="qryOrder" class="productAction" method="qryOrder"> <interceptor-ref name="params"/> <result type="json"></result> </action> </package> </struts>

其中json-default已经extends struts_base.xml

applicationContext.xml 申明action和service

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <beans> . . . . . . <!-- Services --> <bean id="orderService" parent="transactionProxy"> <property name="target"> <ref bean="orderTarget"/> </property> </bean> <bean id="productAction" class="com.app.web.actions.ProductAction" singleton="false"> <property name="orderService"> <ref bean="orderService"/> </property> </bean> </beans>

ProductAction 内容

package com.app.web.actions; import java.util.ArrayList; import java.util.List; import org.apache.log4j.Logger; import org.apache.struts2.ServletActionContext; import com.googlecode.jsonplugin.annotations.JSON; import com.netshop.comm.Constant; import com.netshop.comm.JsonUtil; import com.netshop.comm.lucene.ArticleSearchUtil; import com.netshop.model.member.MemberService; import com.netshop.model.order.IOrderService; import com.netshop.model.order.Order; import com.netshop.model.product.IProductService; import com.netshop.web.baseaction.AbstractAction; public class ProductAction extends AbstractAction{ static Logger log = Logger.getLogger(ProductAction.class); private IOrderService orderService; private List<Order> orderList; private int proId; private String jsonResult; /** * 查询订单列表 * @return * @throws Exception */ public String qryOrder() throws Exception{ try{ //查询 StringBuffer sql = new StringBuffer("SELECT m.email,m.level,o.proNum,o.orderTime FROM Order AS o ,Member AS m WHERE o.productId="); sql.append(proId).append(" AND o.status=").append(Constant.WAIT_BUYER_GOTO_PAY).append(" AND o.memberId=m.id"); ArrayList list = (ArrayList) orderService.find(sql.toString()); //对查询结果进行处理 if(list!=null && list.size()>0){ orderList = new ArrayList<Order>(); for(int i=0;i<list.size();i++){ Object obj[] = (Object[])list.get(i); if(obj!=null && obj.length==4){ //将查询结果存入order Order order = new Order(); order.setMemberEmail((String)obj[0]); order.setMemberLevel(((Integer)obj[1]).intValue()); order.setProNum((Integer)obj[2]); order.setOrderTime((java.util.Date)obj[3]); //将order实例存入list orderList.add(order); } } } //orderList借用工具类转化成json类型的串 jsonResult = JsonUtil.listToJson(orderList); //申明返回的结果，不然页面上不能显示 ServletActionContext.getResponse().setContentType("text/xml"); }catch(Exception e){ log.info("qryOrder Exception="+e.getMessage()); e.fillInStackTrace(); } return SUCCESS; } @JSON(serialize = false) public IOrderService getOrderService() { return orderService; } public void setOrderService(IOrderService orderService) { this.orderService = orderService; } public List<Order> getOrderList() { return orderList; } public void setOrderList(List<Order> orderList) { this.orderList = orderList; } public int getProId() { return proId; } public void setProId(int proId) { this.proId = proId; } public String getJsonResult() { return jsonResult; } public void setJsonResult(String jsonResult) { this.jsonResult = jsonResult;

Order 类

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

JsonUtil 类代码如下：

package com.app.comm; import java.beans.IntrospectionException; import java.beans.Introspector; import java.beans.PropertyDescriptor; import java.util.List; public class JsonUtil { /** * @param object * 任意对象 * @return java.lang.String */ public static String objectToJson(Object object) { StringBuilder json = new StringBuilder(); if (object == null) { json.append("/"/""); } else if (object instanceof String || object instanceof Integer || object instanceof Double) { json.append("/"").append((String)object).append("/""); } else { json.append(beanToJson(object)); } return json.toString(); } /** * 功能描述:传入任意一个 javabean 对象生成一个指定规格的字符串 * * @param bean * bean对象 * @return String */ public static String beanToJson(Object bean) { StringBuilder json = new StringBuilder(); json.append("{"); PropertyDescriptor[] props = null; try { props = Introspector.getBeanInfo(bean.getClass(), Object.class) .getPropertyDescriptors(); } catch (IntrospectionException e) { } if (props != null) { for (int i = 0; i < props.length; i++) { try { String name = objectToJson(props[i].getName()); String value = objectToJson(props[i].getReadMethod().invoke(bean)); json.append(name); json.append(":"); json.append(value); json.append(","); } catch (Exception e) { } } json.setCharAt(json.length() - 1, '}'); } else { json.append("}"); } return json.toString(); } /** * 功能描述:通过传入一个列表对象,调用指定方法将列表中的数据生成一个JSON规格指定字符串 * * @param list * 列表对象 * @return java.lang.String */ public static String listToJson(List<?> list) { StringBuilder json = new StringBuilder(); json.append("["); if (list != null && list.size() > 0) { for (Object obj : list) { json.append(objectToJson(obj)); json.append(","); } json.setCharAt(json.length() - 1, ']'); } else { json.append("]"); } System.out.println("----------"+json.toString()); return json.toString(); } }

页面JS部分 ：

//查询购物车中的商品 function qryOrder(proId){ $.ajax({ type: "POST", url: "user/qryOrder.do?proId="+proId, data: "", datatype: "json", contentType: "application/json", success: function(jsonResult) { qryOrderCallBack(jsonResult); }, error: function(msg) { location = "../error.jsp"; //alert("操作失败，请重试"+msg) } }); } //解析返回得json数据并给页面赋值 function qryOrderCallBack(responseMsg){ var data = eval("("+responseMsg+")"); var order = eval(data.orderList); var result = ""; if(order==null){ alert('order is null'); return; } result += "<thead>"; result += "<tr class='thead'>"; result += "<th scope='col' class='t1'>购买人</th>"; result += "<th scope='col' class='t2'>会员级别</th>"; result += "<th scope='col' class='t4'>数量</th>"; result += "<th scope='col' class='t3'>购买时间</th>"; result += "</tr>"; result += "</thead>"; result += "<tbody>"; //这里的order[i]就相当于list中的order,起属性也是一一对应的 for(var i=0;i<order.length;i++) { var num = order[i].num; if((i+1)%2==1){ result += "<tr class=''>"; }else if((i+1)%2==0){ result += "<tr class='alt'>"; } result += "<td>"+order[i].memberEmail+"***</td>"; result += "<td>"+order[i].memberLevel+"</td>"; result += "<td>"+order[i].proNum+"</td>"; result += "<td class='lower tr'>"+order[i].orderTime+"</td>"; result += "</tr>"; } result += "</tbody>"; $("#orderList").html(result); }

页面HTML部分

<div id="buy-annal"> <table class="buy-record" summary="客户购买记录" cellspacing="0" id='orderList'> </table> </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);
      .......
}