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