Ajax+SSM实现四级联下拉列表

解决Ajax回调值乱码&级联第一个option不触发onchange事件

最近项目有需求,需要按步骤选择科目,模块,章,节,之前主要做后端,前端有段时间没写了,这个功能费了不少时间,网上查资料查了很多,比较散,我把我做出来的分享给大家。
1. 项目架构 Spring +SpringMVC +Mybatis +Jquery
2. 主要配置,applicationContext.xml,mybatis-config.xml网上参考的很多,在此省略,重点提下以下配置,因为Ajax从后台取回调值,前台显示的是乱码,问题找了很久才解决,springmvc-servlet.xml里加入bean MappingJackson2HttpMessageConverter`

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/plain;charset=UTF-8</value>
                        <value>text/html;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
            <bean
                class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json; charset=UTF-8</value>
                        <value>application/x-www-form-urlencoded; charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>`
  1. jsp页面
<script src="${contextPath}/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<body>
        <h3>请选择科目:  
        <select name="catalog" id="catalog" onchange="catalogABC();" >  
        <option value="">请选择科目</option> 
        <option value="a" <c:if test="${param.catalog == 'a'} ">selected</c:if> >语文</option>
        <option value="b" <c:if test="${param.catalog == 'b'} ">selected</c:if> >数学</option>
        <option value="c" <c:if test="${param.catalog == 'c'} ">selected</c:if> >英语</option>
        </select>
        </h3>

        <h3>请选择模块:
        <select name="second" id="second" onchange="secondQuery();" >
        <option value="">请选择模块</option>   
        </select>  
        </h3> 

        <h3>请选择章:
        <select name="third" id="third" onchange="thirdQuery();">
        <option value="">请选择章</option>   
        </select>  
        </h3> 
         <h3>请选择节:
        <select name="forth" id="forth" >
        <option value="" >请选择节</option>   
        </select>  
        </h3>              
<body>
  1. js代码
<script type="text/javascript">

function catalogABC(){  
    var object = $("#catalog").val();
    $("#second").empty();
    if(object !=null){
         $.ajax({
                url : "${contextPath}/demo/findObject?object="+object,
                type : 'post',
                dataType : 'json',
                async : false,
                //contentType: "application/json; charset=utf-8",
                success : function(data) {
                    console.log(data);                  
                       if(data!=null){
                           $("#second").prepend("<option value='0'>请选择</option>");
                            $.each(data,function(i,item){
                                  $.each(item,function(j,val){
                                      $("#second").append("<option value="+val.bookid+">"+val.bookname+"</option>");                                     
                                  })

                              }); 
                       }                                                    
                }

         })
    }else{
        alert("请选择科目!!");
    }


}


function secondQuery(){
    var object = $("#second option:selected").val();   
    $("#third").empty();
     $.ajax({
            url : "${contextPath}/demo/findThird?object="+object,
            type : 'post',
            dataType : 'json',
            async : false,          
            success : function(data) {
                console.log(data);  
                   if(data!=null){
                       $("#third").prepend("<option value='0'>请选择</option>");
                        $.each(data,function(i,item){
                              $.each(item,function(j,val){
                                  $("#third").append("<option value="+val.chapterid+">"+val.chaptername+"</option>");
                              })

                          }); 
                   }                                                    
            }
     })
}

function thirdQuery(){
    $("#forth").empty();
    var object = $("#third option:selected").val();    
     $.ajax({
            url : "${contextPath}/demo/findForth?object="+object,
            type : 'post',
            dataType : 'json',
            async : false,          
            success : function(data) {
                console.log(data);  
                   if(data!=null){
                       $("#forth").prepend("<option value='0'>请选择</option>");
                        $.each(data,function(i,item){
                              $.each(item,function(j,val){
                                  $("#forth").append("<option value="+val.chapterid+">"+val.chaptername+"</option>");
                              })

                          }); 
                   }                                                    
            }
     })
}

</script>
  1. 中途遇到的Bug:级联的第一个option,选中没有反应,不会触发onchange()事件;重新选择上级菜单时,下级菜单不会清零,原来上级菜单选择的会保留在里面。网上搜了很多一一尝试,没有很好的解决方法,最后自己摸索,终于成功了。方法:$("#forth").empty();$(“#forth”).prepend(“请选择“);`
  2. 看下Ajax url后台控制层
    @RequestMapping("/findObject")
    @ResponseBody
    public String findObject(@RequestParam("object") String object) {
        String str = object + "%";
        List<TextBook> list = tservice.selBySubject(str);
        JSONObject obj = new JSONObject();
        obj.put("list", list);
        String a = obj.toString();//数据转为JSON格式的
        // System.out.println(a);
        return a;
    }

    @RequestMapping("/findThird")
    @ResponseBody
    public String findThird(@RequestParam("object") String object) {
        List<Catalog> list = cservice.queryThird(object);
        JSONObject obj = new JSONObject();
        obj.put("list", list);
        String a = obj.toString();
        // System.out.println(a);
        return a;
    }

    @RequestMapping("/findForth")
    @ResponseBody
    public String findForth(@RequestParam("object") String object) {
        String str = object.substring(0, 4);
        List<Catalog> list = cservice.queryForth(str, object);
        JSONObject obj = new JSONObject();
        obj.put("list", list);
        String a = obj.toString();
        // System.out.println(a);
        return a;
    }
  1. 说明:JSONObject使用的是net.sf.json.JSONObject
  2. 结束语:本人入门没多久,样式什么的也没做,有问题多多交流啊,欢迎留言
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值