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