需求说明
前端有两个下拉列表,一级目录下拉菜单展示所有一级目录列表,二级目录下拉菜单展示一级目录下属的所有二级目录列表,即父节点下的所有子节点
前端
定义一级目录
一级目录:<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方法好像存在风险,但由于暂时没找到替代的方法只能先用