struts+ajax+json+jquery整合
以二级联动为例(选择了供应商后,后面的select出来该供应商对应的商品的类别)
1.jsp页面
- 把页面对应select的标签换成struts的标签
- JavaScript代码
<script type="text/javascript"> $(function(){ //为id为supplier的组件绑定事件 $("#supplier").change(function(){ //获取选中的供应商,将uuid传入到后台,查找该供应商下的商品类别 //ajax 方式获取数据 //第一个参数:url 第二个参数:发送请求的参数 第三个参数:请求完毕之后执行的内容 var supplierUuid = $(this).val(); $.post("goodsType_ajaxGetsm.action",{"gtm.sm.uuid":supplierUuid},function(data){ $("#goodsType").empty(); var gtmList = data.gtmList; if(gtmList.length==0){ alert("大神不要折腾系统"); return ; } for(var i=0;i<gtmList.length;i++){ var gtm = gtmList[i]; //将获取的数据拼接成jQuery格式的option组件,并添加到对应的select的组件中 $op = $("<option value='"+gtm.uuid+"'>"+gtm.name+"</option>"); //将选项添加到select中 $("#goodsType").append($op); } }); }); });
2.Action
private List<GoodsTypeModel> gtmList; public List<GoodsTypeModel> getGtmList() { return gtmList; } //ajax获取供应商对应的类别信息 public String ajaxGetsm(){ gtmList = goodsTypeEbi.getAllBySm(gtm.getSm().getUuid()); //对应的调用的商品类别的方法 //如何将数据传递出去(JSON格式) //使用json工具类JSONArray return "ajaxGetsm"; }
得到的数据需要转化为json格式,使用struts-json插件完成该功能,该插件只能将Action类中的get开头的方法数据返回,因此为上述方法对应的数据提供get方法
3.struts.xml
配置结果集
<package name="default" namespace="/" extends="json-default">
........
<result name="ajaxGetsm" type="json"> <!-- 设置数据的源 --> <!-- 设置数据的根 --> <!-- 数据来源于action类中 --> <!-- 默认将所有的get方法对应的数据返回 --> <param name="root">action</param> <!-- 设置数据过滤 --> <param name="includeProperties"> gtmList\[\d+\]\.uuid, gtmList\[\d+\]\.name </param> </result>
struts.xml文件中开启json数据格式支持
修改默认的继承模式
设置对应的结果返回类型为json数据格式类型
设置返回json数据,并没有指定返回的数据来源,指定返回数据来源
设置数据来源
此处设置数据来源与action类中,那么此时返回的数据将是Action类中所有的get方法开头的方法返回值