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

最新推荐文章于 2022-11-11 10:40:18 发布

Bean小风

最新推荐文章于 2022-11-11 10:40:18 发布

阅读量2.3k

点赞数 2

分类专栏： web前端文章标签： Ajax回调值乱码 option不触发重新选择清空

本文链接：https://blog.csdn.net/aifengying0622/article/details/70312780

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

解决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>`

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>

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>

中途遇到的Bug：级联的第一个option，选中没有反应，不会触发onchange()事件；重新选择上级菜单时，下级菜单不会清零，原来上级菜单选择的会保留在里面。网上搜了很多一一尝试，没有很好的解决方法，最后自己摸索，终于成功了。方法：$("#forth").empty();$(“#forth”).prepend(“请选择“);`
看下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;
    }