jQuery + ajax+ json + Struts2 实现表单联动

2017-03-18

在进行信息添加的过程中，经常会用到上下联动的需求，如省市联动。商品的供应商和商品类别的联动。如何实现呢？

预加载数据

进入商品信息添加页面前，需要加载一些需要的数据

首先要加载所有的供应商信息集合与第一个供应商对应的商品类别集合，并进行展示;
当供应商信息发生变化时，ajax动态加载商品类别信息，并进行展示。

如果供应商的商品类别为空时，直接不加载

public GoodsModel gm = new GoodsModel();
// 到添加
public String input() {
    // 加载所有具有类别信息的供应商信息
    List<SupplierModel> supplierList = supplierEbi.getAllUnion();
    ActionContext.getContext().getSession().put("supplierList", supplierList);
    // 加载当前选中的供应商对应的所有商品类别信息
    Long supplierUuid = null;
    if (gm.getUuid() != null) {
        // 修改操作
        gm = goodsEbi.get(gm.getUuid());
        supplierUuid = gm.getGtm().getSm().getUuid();
    } else {
        //不是修改操作，默认加载第一个
        supplierUuid = supplierList.get(0).getUuid();
    }
    List<GoodsTypeModel> gtmList = goodsTypeEbi.getAllBySupUuid(supplierUuid);
     ActionContext.getContext().getSession().put("gtmList", gtmList);
    return "input";
}

页面请求

为供应商select添加选项改变事件

$(function(){
    //为id为supplier 绑定change事件
    $("#supplier").change(function(){
    });
});

添加测试语句，测试功能是否正常，例如添加alert语句

在操作中发送ajax请求，获取后台数据

1
2
3

$.post("goodsType_ajaxGetBySupUuid.action",{"gm.sm.uuid":supplierUuid},function(data){
});

其中的参数说明:

第一次参数：发送的请求url
第二个参数：json格式的参数列表
第三个参数：当前ajax异步请求执行完毕后返回的处理事件，其中data参数封装了后台请求传输的数据

后台处理数据

在产品类别GoodsTypeAction中添加对应的方法，根据传递供应商编号获取对应类别信息

private List<GoodsTypeModel> gtmList;
//ajax获取供应商对应的类别信息
public String ajaxGetBySupUuid(){
        //根据供应商的uuid获取对应的类别信息
        gtmList = goodsTypeEbi.getAllBySm(gm.getSm().getUuid());
        return "ajaxGetBySupUuid";
    }

如何将数据传递出去

得到的数据需要转化为json格式,可以使用json工具类JSONArray,或使用struts-json插件。此处使用struts-json插件完成该功能(√)

加入相关jar包

向项目中加入struts-json对应的jar包 struts-json-plugin.jar

提供get方法

该插件只能将Action类中的get开头的方法数据返回，因此为上述方法对应的数据提供get方法

1
2
3

public List<GoodsTypeModel> getGtmList() {
    return gtmList;
}

配置struts.xml

struts.xml文件中开启json数据格式支持，修改默认的继承模式
<package name="default" namespace="/" extends="json-default">

设置对应的结果返回类型为json数据格式类型 type="json"

<!-- GoodsType -->
<action name="goodsType_*" class="goodsTypeAction" method="{1}">
    <result name="ajaxGetBySupUuid" type="json">
    </result>
</action>

设置数据来源
设置返回json数据，并没有指定返回的数据来源，需要指定返回数据来源,有几种常见方式
1. 设置数据来源于action类中:
  <param name="root">action</param>
  如果只设置数据来源于action类中，那么此时返回的数据将是Action类中所有的get方法开头的方法返回值，一般需要过滤。
2. 包含过滤设置:
  <param name="includeProperties">gtmList\[\d\]\.uuid,gtmList\[\d\]\.name</param>
3. 排除过滤设置:
  <param name="excludeProperties"> gtmList\[\d\]\.sm, </param>
4. 设置数据来源从某个根获取: (√)
  1
  2
  3
  4
  5
  6
  7
  <result>
  <param name="root">action</param>
  <param name="includeProperties">
  gtmList\[\d\]\.uuid,
  gtmList\[\d\]\.name
  </param>
  </result>

PS: 设置root时，还可以设置对象或者集合对象。
如果是对象，则获取的数据为对象json格式转化;
如果是集合对象，则获取的数据为集合中的对象数组.
上述格式中设置了需要的数据位gtmList集合中每个元素的uuid属性与gtmList集合中每个元素的name属性。

页面获取json数据

请求相应的回调方法的参数data中封装了上述返回的json格式数据,根据json数据的格式特点，获取其中的gtmList数据
将获取的数据拼装成jquery格式的option组件，并添加到对应的select中

由于每次都向类别select中添加数据，数据越来越多，应该每次先清除掉原始数据，然后添加。

var supplierUuid = $(this).val();
$.post("goodsType_ajaxGetBySupUuid.action",{"gm.sm.uuid":supplierUuid},function(data){
    //清除当前select中的项
    $("#goodsType").empty();
    var gtmList=data.gtmList;
    for(var i = 0 ; i<gtmList.length;i++){
        var gtm=gtmList[i];
        //将获取的数据组织成select中的option选项,然后添加到select中
        $op=$("<option value='"+gtm.uuid+"'>"+gtm.name+"</option>");
        //将选项添加到select中
        $("#goodsType").append($op);
    }
});

效果展示

上下联动效果展示

知识总结

jquery发送ajax请求的方式
struts-json-plugin插件的使用方式
收集数据时，产品数据只需收集其类别数据即可，无需收集对应的供应商编号，毕竟后台数据模型关系式产品与产品类别产生关系。
其他如省市联动等也可以用类似的实现方式，使用起来也是非常方便的。

☆end★