一个基于json+jquery+SSH2的级联制作

本文介绍了一种基于JSON、jQuery和SSH2的级联菜单制作方法,提供了详细的实现步骤和示例代码,使得创建多级菜单变得简单易行。通过异步获取数据,实现菜单的动态加载,提高了用户体验。

一个基于json+jquery+SSH2的级联制作

 

下面是我的一个二级菜单案例,基于这种方案,你做多少级菜单都行。


jquery.jsp页面重要代码如下:
<script type="text/javascript">
        $(function(){
            $("#item").change(function(){
                if($("#item").val()==""){
                    $("#twoitem").html('<option value="">==请选择小类别==</option>');
                    return ;
                }
                $.getJSON("show_twoitem.action",{"items.id":$("#item").val(),"time":(new Date()).getTime()},function(data){
                    $("#twoitem").html("");
                    $.each(data.twoitem, function(index, two){
                        $("#twoitem").append("<option value="+two[0]+">"+two[1]+"</option>");
                    });
                });
            });
        });
</script>

 

表示里面的下拉列表:
<select id="item" name="shop.shop_item" style="vertical-align:middle; margin-top:2px; width:150px;">
        <option value="" selected="selected">==请选择大类别==</option>
        <s:iterator id="item" value="item">
             <option value='<s:property value="#item.id"/>'><s:property value="#item.item_name"/></option>
        </s:iterator>
</select>
<select id="twoitem" name="shop.shop_twoitem" style="vertical-align:middle; margin-top:2px; width:150px;">
        <option value="" selected="selected">==请选择小类别==</option>
</select>

至于select里面的name表示什么不用管,因为我们做的是异步,跟它没关系。
当我们进入jquery.jsp页面的时候必须把第一个下拉列表给查询出来,这个很简单的吧,就一个action跳转进来传进来就OK。
数据库相关表的结构如下(数据是随便添加的):
item表
id  item_name
1    aaa
2    bbb
twoitem表
id  twoitem_name   pid(item表的外键)
1    a1a1a1         2
2    b1b1b1         1
3    c1c1c1         2
那么执行一个action到jquery.jsp后就有了第一个下拉列表的数据:
<select id="item">
 <option value="" selected="selected">==请选择大类别==</option>
 <option>
  <option value="1">aaa</option>
  <option value="2">bbb</option>
 </option>
</select>
当我们选择下拉列表的时候就会触发:
 $("#item").change(function(){
                if($("#item").val()==""){
                    $("#twoitem").html('<option value="">==请选择小类别==</option>');
                    return ;
                }
                $.getJSON("show_twoitem.action",{"items.id":$("#item").val(),"time":(new Date()).getTime()},function(data){
                    $("#twoitem").html("");
                    $.each(data.twoitem, function(index, two){
                        $("#twoitem").append("<option value="+two[0]+">"+two[1]+"</option>");
                    });
                });
            });
这样就去了show_twoitem.action
struts.xml与之相对应的配置如下:
<package name="json" extends="json-default">
 <action name="show_twoitem" class="show_twoitem" method="show_twoitem">
  <result type="json" />
 </action>
</package>
说明:这里一定要extends="json-default" 和 <result type="json" /> 
class="show_twoitem" 是spring注入的,这里不多说,不重要; 那么method="show_twoitem"就是我们要调用的方法;代码如下:
public String show_twoitem(){
 twoitem=shopdaoimpl.queryTwo_itemByID(items.getId());  //根据item的ID把对应的二级相关的给查询出来
 return SUCCESS;
}
这里twoitem是一个list,必须有setter 和 getter 方法(当然是为了传值)
shopdaoimpl.queryTwo_itemByID表示调用的impl类的一个方法,这里shopdaoimpl用spring注入

 

好了,到这里基本功能已经实现,最后的twoitem传回了jquery.jsp页面
如果成功,$.getJSON() 里面fucntion(data)的data就是返回来的json数据,根据不同情况(数据或对象处理不一样)去取。
然后通过append方法,一切OK。


通过类似的方法,我们可以做更多的菜单,三级,四级。。。都没问题
这是我们办法,与大家分享。
不知道你有没有更好的办法呢,有的话,不如给我们也分享一下呢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值