二级联动ajax写法和前端解析List套map的json字符串

需求说明

前端有两个下拉列表，一级目录下拉菜单展示所有一级目录列表，二级目录下拉菜单展示一级目录下属的所有二级目录列表，即父节点下的所有子节点

前端

定义一级目录

一级目录：<select id="first" onchange="f(this.value)">
                   
                    <option value="1">家用电器</option>
                    <option value="4">电脑</option>
            <!-- 定义两个作为示例-->
                </select>

定义二级目录

二级目录：<select id="second" name="id">
        <option value="0">--请选择--</option>
    <!--默认状态是这样，要使用ajax获取当前所有的子节点 -->
    </select>

ajax

<script>
    //当一级目录的option改变时触发
        function f(val){
            console.log("触发")
            <!--执行搜索点击事件-->
            $.ajax({
                url:"setSecond.do",//请求路径
                type:"post",//请求方式
                data:{
                    "id":val
                },
                success:function (data) {
                    //获取select对象备用
                    var sel = document.getElementById("second");
                    //删除原有的option，这里有个小bug，处于选中状态的option不会被删除
                    var num = sel.options.length;
                    for (var j = 0;j<num;j++){
                        sel.options.remove(j);
                    }
                    
                    //将后台传过来的数据装换成json对象
                    var obj = eval (data);
                    //由于没找到获取obj长度的方法，且经尝试能根据索引获取数据，所以使用了在外面定义一个索引再使用迭代器遍历的方法
                    var index = 0;
                    for (var a in obj){
                        //添加option
                        sel.options.add(new Option(obj[index].name,obj[index].id));
                        index++;
                    }
                },//响应成功后的回调函数
                error:function () {

                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"json"//设置接收到的响应数据的格式
            });
        };

    </script>

后端

控制层

需要jackson解析器的相关jar包

@ResponseBody //设置以html/text格式或者json格式返回
    @RequestMapping(value = "/setSecond.do",produces = {"application/json;charset=UTF-8"}) //请求路径，并处理返回时的中文乱码
    public String setSecond(@RequestParam int id){
        //调用service层方法查询所有的二级目录
        List<Map<String, Object>> maps = service.GetChildItem(id);
        //新建json解析器对象
        ObjectMapper mapper = new ObjectMapper();
        String s= "";
        try {
            //将查询出来的数据封装成json
            s = mapper.writeValueAsString(maps);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return s;
    }

避坑

关于前端解析JSON的问题

后端返回的json字符串可以直接使用eval方法解析，但是很多关于eval使用的帖子都在字符串外层加上了一个小括号，这样会造成eval方法报错。

经了解eval方法好像存在风险，但由于暂时没找到替代的方法只能先用