可取消判断是否为2的，ajax也可以不用传2
来源：3-8 实现二级联动菜单-2
kevin唯心
2019-11-03 15:16:16
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class ChannelServlet
*/
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChannelServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level=request.getParameter("level");
String parent =request.getParameter("parent");
System.out.println(level);
System.out.println(parent);
List chlist= new ArrayList();
if(level!=null&&level.equals("1")) {
chlist.add(new Channel("ai","前沿/区块链/人工智能"));
chlist.add(new Channel("web","前端/小程序/js"));
}/*else if(level.equals("2")) {*/
if(parent!=null&&parent.equals("ai")){
chlist.add(new Channel("micro","微服务"));
chlist.add(new Channel("blockchain","区块链"));
chlist.add(new Channel("other","。。。"));
}else if(parent!=null&&parent.equals("web")){
chlist.add(new Channel("html","HTML"));
chlist.add(new Channel("css","CSS"));
chlist.add(new Channel("other","。。。"));
}
/* } */
String json =JSON.toJSONString(chlist);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url":"/ajax/channel",
"data":{"level":"1"},
"type":"get",
"dataType":"json",
"success":function(data){
console.log(data);
for(i=0; i<data.length;i++){
var ch =data[i];
$("#lv1").append("<option id='option' value='"+ch.code+"'>"+ch.name+"</option>")
}
}
})
})
$(function(){
$("#lv1").on("change",function(){
var parent=$(this).val();
console.log(parent);
$.ajax({
"url":"/ajax/channel",
"data":{"parent":parent},
"type":"get",
"dataType":"json",
"success":function(data){
console.log(data);
//移除所有lv2下的option
$("#lv2>option").remove();
for(i=0; i<data.length;i++){
var ch =data[i];
$("#lv2").append("<option id='option' value='"+ch.code+"'>"+ch.name+"</option>")
}
}
})
})
})
</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
<option id="option" selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>代码如上，和老师的略有不同，只是判断了一下是否为空就不会报空指针异常了。我还是比较能习惯这种思路，而且我第二个ajax 并没有再次传level，我感觉老师那种逻辑我转不过弯来。老师能否给点逻辑上的指点，本人初级开发逻辑上面有点死板，很苦恼
写回答
1回答
-
好帮手慕小班
2019-11-03
同学你好，1、如上代码，同学的写法也是可以的，同学是直接对level与parent进行了判断，直接对这两个参数进行判断，这样也是可以。
2、 1)、这里老师的意思是将level作为菜单级别的判断依据，这些请求都是发送到channel这个Servlet，那在这个Servlet中如何判断这些菜单的级别呐，就可以通过这些参数来判断了。
2)、这里只是一个二级菜单，如果这里是三级菜单或四级菜单呐，每一级别的菜单都有很多条数据呐，此时我们在Servlet就可以根据这个level、parent参数，来判断这是哪一级的菜单，能够更加快速的定位，这也是以后开发中常见的一种情况，例如;
if(1){ //一级菜单的内容 //大类别 }else if(2){ //二级菜单 //中级类别 }else if(3){ //三级菜单 //小类别 }else if(4){ //四级菜单 //详细信息 }这样就能简洁明了的的书写一个菜单的内容，并且层次分明。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题